i'm working on an Angular project. I've firstly add translaService in the project and everything were good. The language were shared by all components correctly.
When i've enable the lazy loading, i have divided my project by modules (this was expected) and i've notice that the translated language were not shared anymore accross modules. For translation, i use ngx-translate.
in app.module i have this:
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (httpTranslateLoader),
deps: [HttpClient]
},
isolate:false
})
export function httpTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
in my shared module i have this:
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [],
imports: [
CommonModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
},
isolate: false,
extend:true
})
]
,
exports:[TranslateModule]
})
export class SharedTranslateModule {
constructor( translate: TranslateService) {
translate.addLangs(['en', 'fr']);
translate.setDefaultLang('en');
translate.use('en');
}
}
in my about module i have this:
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: (aboutHttpTranslateLoader),
deps: [HttpClient]
},
isolate: false
})
export function aboutHttpTranslateLoader(http : HttpClient){
return new TranslateHttpLoader(http, './assets/i18n/about/', '.json')
}
my project is divide like this
|app.component.html
<app-header> </app-header>
<router-outlet> <router-outlet>
<app-footer> </app-footer>
app-header is the component where i switch languages by using translate.use(selected-language)
I'm out of ideas. i have try many things but they doesn't solve the problem.
Can someone help me?
Thank you!