Angular 5 and ngx-translate with shared module loose translations if refresh

问题

I have an angular app that uses ngx-translate. Below the versions:

"@angular/core": "5.2.6",
"@ngx-translate/core": "9.1.1",
"@ngx-translate/http-loader": "2.0.1"

In the AppModule class i added the import below:

imports: [
    .....
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
    ......
]
.....
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

And i created a SharedModule that exports the TranslateModule:

exports: [
    // Modules
    TranslateModule,
    ....
]

Everything works like a charm, except when i refresh a page that is placed in a different module than app module (that imports the SharedModule). In this case I need to navigate back to the home page (coded in the AppModule), once i reach the home page ngx-translate come back to work and i can re-navigate to the other pages with ngx-translate that works.

Can anybody help me? Thanks in advance

UPDATE Seems that the problem is related to the fact that translateService.currentLang is undefined when i refresh the page. If i set programmatically the language in ngOnInit via translateService.use(language) it works. How can i avoid to set manually in every component this check on currentLang variable by setting a default currentLang?

回答1:

I had translateModule also in my shared module, and every module was importing this. I exported the TranslateModule within the sharedmodule. Doing this, everything was working as intended and every module had it's translations showing up. Maybe try the same thing and see if it works for you.

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

Set useDefaultLanguage via translateService in your bootstrapped component via app.module. That way it's the only place it sets the default language at top level.

来源：https://stackoverflow.com/questions/51559743/angular-5-and-ngx-translate-with-shared-module-loose-translations-if-refresh

标签

angular

ngx-translate