core
core copied to clipboard
Translations mixed in app between two languages.
Hello, here is the problem that I'm currently having.
My browser is set in english, my app however has its language set in french. The page renders some of the text in english, some in french. Translations are properly setup in the fr & en.json
Any ideas on why the display is getting mixed like that ?
Thx
private setupLanguage(translate: TranslateService) {
let userLang = this.getUser() && this.getUser().language;
if(userLang && this.config.appLanguage.availableListCodes.indexOf(userLang) == -1) {
userLang = 'en';
}
const defaultLang = this.config.appLanguage.defaultCode;
translate.addLangs(this.config.appLanguage.availableListCodes);
translate.setDefaultLang(defaultLang); // this language will be used as a fallback when a translation isn't found in the current language
const browserLang = defaultLang || translate.getBrowserLang();
const definitiveLang = userLang ? userLang : (browserLang.match(/en|fr/) ? browserLang : defaultLang);
translate.use(definitiveLang)
.subscribe((res: any) => {
this.setPageTitle();
});
this.dateAdapter.setLocale(definitiveLang);
translate.setDefaultLang('fr');
translate.use('fr');
}
app.module.ts : defaultCode is 'fr'
TranslateModule.forRoot({
defaultLanguage: appConfig.appLanguage.defaultCode,
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
},
compiler: {
provide: TranslateCompiler,
useClass: TranslateMessageFormatCompiler
}
// default isolate: false
})
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json?v='+ Date.now());
}