.forChild() usage with lazy loading routes

I’m submitting a … (check one with “x”)

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior AppModule

export function createTranslateLoader(http: Http) {
    return new TranslateHttpLoader(http, "/i18n/", "/index.json");
}
imports: [
    TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader,
                deps: [Http]
            }
        }),
]

SharedModule

imports: [
    //TranslateModule
],
exports: [
    //TranslateModule,
]

AdminModule

export function createTranslateLoader(http: Http) {
    return new TranslateHttpLoader(http, "/i18n/", "/admin.json");
}
imports: [
    TranslateModule.forChild({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader,
                deps: [Http]
            }
        }),
]

Expected/desired behavior I would like to load additional JSON files per component / module, i.e. an admin.json for the administration panel of our app. I would like to import one TranslateModule inside of SharedModule and configure it allow all modules that don’t explicite call .forChild().

Both doesn’t work, it simply doesn’t load the admin.json and hence doesn’t translate strings defined in that file.

Please tell us about your environment:

• ngx-translate version: 6.0.0-beta.1

• Angular version: 2.4.7

• Browser: [Firefox 51.0.1]

• Language: [TypeScript 2.0]

[subhani1249]

appModule.ts

Create one shared module translateSharedModule.ts

appComponent.ts import {TranslateService} from ‘@ngx-translate/core’; constructor(public translate: TranslateService) { translate.setDefaultLang(‘en’);

}

homeModule.ts //or any other submodules import { TranslateSharedLazyModule } from ‘…/…/Common/translateSharedLazyModule’; imports : [
TranslateSharedLazyModule ], …

[neolanders]

Since I didn’t found any plunker working with ngx-translate librairy and I also had some difficulties to manage to make it work with LoadChildren, I’ve setup a way that work pretty well for me:

I’ve created two SharedModules, (one for lazyLoading and one for the other part of my application)

SharedLazyModule for lazy loading content:

@NgModule({
  imports: [
    HttpModule,
    CommonModule,
    TranslateModule.forChild({}),
  ],
  exports: [
    CommonModule,
    TranslateModule
  ]
})
export class SharedLazyModule {}

SahredModule for App

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: Http) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
    imports: [
      HttpModule,
      CommonModule,
      TranslateModule.forRoot({
           provide: TranslateLoader,
           useFactory: HttpLoaderFactory,
           deps: [Http],
         })
    ],
    exports: [
      CommonModule,
      TranslateModule
    ]
})
export class SharedModule {
    
     constructor(private translate: TranslateService) {
                  
        translate.addLangs(["en", "fr"]);
        translate.setDefaultLang('en');

        let browserLang = translate.getBrowserLang();
        translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    }
}

See Plunker: https://plnkr.co/LVmIuI1Xw9vFn0IuC2jW