ngx-translate language change is not effect throughout application

Question

I have created the application with the pages like dashboard and settings. Now I want to change the language throughout the application when I change the language option. But it is working only for the settings page where I have called the language change function not in dashboard page.

Experts inputs please?

settings.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core'

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {

  public lang: string;
  constructor(private translate: TranslateService) {
    this.lang = "en";

    translate.setDefaultLang('en');

    let last = localStorage.getItem("selectedLang");
    // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use(last);
  }


  changeLanguage(value: string) {

    console.log(value);
    if (value == "German") {
      this.lang = "de";
      localStorage.setItem("selectedLang", this.lang);
      this.translate.use(this.lang);
    }

    if (value == "English") {
      this.lang = "en";
      localStorage.setItem("selectedLang", this.lang);
      this.translate.use(this.lang);
    }
  }
}

settings html

<div class="form-group">
  <label [innerHTML]="'description' | translate"></label>
  <p>Language for user interface and display data.</p>
</div>

dashboard html

<div class="card card-small dash-warning">
      <h2>
        <i class="cis2-fa cis2-fa-dg-logo"></i>
      </h2>
      <span class="m-t-20" [innerHTML]="'dash.doc_gen_status' | translate"></span>
      <h2 class="upper-case bold" [innerHTML]="'dash.doc_gen_unavail' | translate">Unavailable</h2>
    </div>

app.module.ts

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

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule, HttpClientModule, ReactiveFormsModule, ToasterModule.forRoot(), NgDynamicBreadcrumbModule, TooltipModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
    }
  })],
  declarations: [AppComponent, DashboardComponent, HeaderComponent, SidebarComponent, LoginComponent],
  providers: [LoggerService, DataService, Title, ToasterService, { provide: APP_BASE_HREF, useValue: '/' }, Resolver, httpInterceptorProviders],
  bootstrap: [AppComponent]
})

app.routing.module.ts

const routes: Routes = [
  {
    path: routePaths.login,
    component: LoginComponent
  },
  {
    path: routePaths.dashboard,
    component: DashboardComponent,
  },
  {
    path: routePaths.userProfile,
    loadChildren: './modules/userProfile/user-profile.module#UserProfileModule'
  },
  { path: '**', redirectTo: routePaths.login, pathMatch: 'full' }
];

user.profile.module.ts

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

@NgModule({
  imports: [CommonModule, ReactiveFormsModule, FormsModule, UserProfileRoutingModule,
    AgGridModule.withComponents([]), TooltipModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
    }
  })],
  declarations: [SettingsComponent],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})
export class UserProfileModule { }

Answer 1

It's because you import TranslateModule.forRoot in multiple places which makes lazy loaded modules have their own instances of TranslateService.

What you should do is to keep TranslateModule.forRoot in AppModule only and any other module who needs TranslatePipe will just import TranslateModule.

TranslateService will be globally available to all modules and it will be singleton. So, change UserProfileModule to this

@NgModule({
  imports: [CommonModule, ReactiveFormsModule, FormsModule, UserProfileRoutingModule,
    AgGridModule.withComponents([]), TooltipModule,
    TranslateModule],
  declarations: [SettingsComponent],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})
export class UserProfileModule { }