Translations mixed in app between two languages.

[danrod7]

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