angular - how to use ngx-translate with shared module and lazy loading modules on Angular11 app

Viewed 726

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!

0 Answers
Related