ngx-translate is not working for lazy loaded module

7
votes

I want to implement ngx-translate in angular 5 project lazy loaded module wise its working for only parent module but not works in my child module so please suggest better solution.

I write my code for app module .

and i am using @ngx-translate/core and @ngx-translate/http-loader

app.module.ts

 TranslateModule.forRoot({
      @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    LayoutModule,
    HttpClientModule,
    BrowserAnimationsModule,
    HttpModule, ReactiveFormsModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false }
    ),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/app/', '.json');

}

child.module.ts

@NgModule({
  imports: [

    RouterModule,
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    GridModule,
    DropDownsModule,
    FormsModule,
    ExcelModule,
    ControlMessagesModule, ReactiveFormsModule,    
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: (AdminTranslateLoader),
        deps: [HttpClient]
      },
      isolate: true
    })

  ],

export function AdminTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/admin/', '.json');
}
3
angularlocalizationngx-translate
Try using the same path './assets/i18n/app/' for both modules and see if it works. I am using same file across different modules and it is working fine to me – Yousef khan
My requirement is store translation in different json file like module wise and store specific translation in specific file example if admin module loaded then only admin/en-json will be load and only admin translation should be load for translation – vishnu

3 Answers

6
votes

I had a similar problem, where I was calling TranslateModule.forRoot() in a SharedModule:

TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
    }
})

This SharedModule is imported by all my other lazy-loaded modules. I have a menu-bar child component with a button to switch language. This component gets the TranslateService via injection in the usual way of the constructor:

constructor(private translate: TranslateService) { }

The Problem

Calling TranslateService.use('[LANG-CODE]') does change the translation in my menu-bar component. But it didn't change the translation for any other child components.

This worked for me

I found this (quite old) issue on github that basically says we shouldn't be calling TranslateModule.forRoot() in a SharedModule.

github issue - TranslateModule.forRoot should not be put in SharedModule

So I moved the TranslateModule.forRoot() into the AppModule as suggested, and export the TranslateModule. Then I import and export TranslateModule in my SharedModule.

After doing this, calling TranslateService.use() translates the texts for other child components too, not just the one that is calling the function (menu-bar in my case)

Hopefully anyone else with a similar problem will find this useful.

0
votes

I had same problem with my Angular 12 project as well.

Configured the project as:

  1. Added TranslateModule.forRoot() in app.module.ts like
export function httpLoaderFactory(http: HttpClient){
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    TranslateModule.forRoot(
      {
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient]
      }
    }
    ),
  ]
})
export class AppModule { }
  1. Imported and Exported TranslateModule in my SharedModule.
  2. Imported the SharedModule in Lazy Loaded Component Module.
  3. It will works smoothly.
-1
votes

i think you have to set default lang ! for example :

export class ChildModule {
 constructor(private readonly translate: TranslateService) {
    translate.setDefaultLang(translate.getBrowserLang());
  }
}