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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With