default language fallback not working

[gingters]

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[X] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Given
Default language is set to a certain default language. This default file provides all keys.
One available language is en-US. This language provides all keys.
Current language is set to de-DE. de-DE provides most, but not all keys.

Current behavior
When a translation for a key is requested which is not available in de-DE, the KEY is displayed.

Expected/desired behavior
When a translation is requested for a key that is missing in the current language, the VALUE of the key from the DEFAULT language should be displayed.

Reproduction of the problem
See this plunkr: http://plnkr.co/edit/W80lvlrhOTS3Sf1NU43U?p=preview
The languages are put into language specific folders, and the default file is located at the i18n directory to act as the global fallback.

What is the expected behavior?
When a key is not present in one of the two languages, the fallback value from the default file i18n/translation.json should be displayed.

What is the motivation / use case for changing the behavior?
Falling back to the default language should be the default for keys that are not translated.

Please tell us about your environment:

• ngx-translate version: 6.0.1
• Angular version: 4.32.3
• Browser: Chrome 57

[Beni90]

Hi, any answer to this request? I face the same problem:

translate.setDefaultLang('en');
translate.use('en'); // in my eyes useless line but found this as a solution in another thread.
let browserLang = translate.getBrowserLang();
translate.use(browserLang);

basically I want to read the browsers language and use this language for my translations (this works smoothly!) but as I live in Switzerland a lot of Browsers are set co DE-CH which is not supported by my translation files so the translations will obviously fail. For this I want to set a Fallback language (de or en whatever) which translates all the missing keys.

thanks for your help

[SvenBudak]

Gotnalso the Same Problem. Anyway News Here?

[all43]

I also faced same issue. In my case there was an extra comma in en.json file, which made it invalid. It's always better to clone working example and compare if there error or not. Fallback worked perfectly in example, so I examined my code and found a typo.

[lalo-mx]

I am facing the same issue. For now i am using the @Beni90 workarund but both languages are not always loaded. Any news in a fix?

    //es.json
    {
    }
    //en.json
    {
       "tag-example": "Example"
    }

    //Working example
    this.translate.setDefaultLang('en');
    this.translateLoad = forkJoin(
       this.translate.use('en'),
       this.translate.use('es')
     );

      this.translateLoad.subscribe(() => {
          this.translate.get('tag-example').subscribe( tag =>   console.log(tag));
      });

    //Not working example
    this.translate.setDefaultLang('en');
    this.translate.use('en');
    this.translate.use('es');
    this.translate.get('tag-example').subscribe( tag =>   console.log(tag));
    //Sometimes the result is "tag-example" and others "Example"

[DenysVuika]

We are also facing this problem. Application provides support for a dozen of languages, with en as a default/fallback. As soon as browser language is set to some other language - the library won't use fallback values and all pipes display just resource keys.

[lbngoc]

In my case, my app have 2 languages: English and Vietnamese, so I only create a translation for VIetnamese (./assets/i18n/vi.json) and set default language is English.
This is how can I config my app:

app.modules.ts

import { Observable, from, of } from 'rxjs';
...
export const DEFAULT_LANGUAGE = 'en';
export class LazyTranslateLoader implements TranslateLoader {
  getTranslation(lang: string): Observable<any> {
    if (lang === DEFAULT_LANGUAGE) {
      return of({});
    }
    return from(import(`../assets/i18n/${lang}.json`));
  }
}
...
TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: LazyTranslateLoader
      },
    }),

Please noted that I use LazyTranslateLoader, not HttpLoaderFactory like example of ngx-translate Usage, because I did not create en.json in i18n directory, so the HttpLoaderFactory always response error 404 when changing language to en

app.component.ts

constructor(...) {
    let lang = getAppLanguage();
    this.translate.setDefaultLang(DEFAULT_LANGUAGE);
    this.translate.use(lang);
}

In Setting screen, I could switch language simply with an ion-toggle element (or somethings else) without any errors

<ion-item>
    <ion-label>Vietnamese</ion-label>
    <ion-toggle (ionChange)="changeLang($event)"></ion-toggle>
  </ion-item>

changeLang($event) {
    this.translate.use($event.detail.value ? 'vi' : DEFAULT_LANGUAGE);
}