ngx-translate is not working for lazy loaded module

Question

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');
}

Answer 1

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.

Answer 2

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 { }

2. Imported and Exported TranslateModule in my SharedModule.

import { NgModule, OnChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    TranslateModule
  ],
  exports: [
    TranslateModule
  ]
})
export class SharedModule { }

3. Imported the SharedModule in Lazy Loaded Component Module.
4. It will works smoothly.