angular-translate - Fallback language for determinePreferredLanguage()

Question

I use angular-translate in my app. How can I register a fallback language if the determinePreferredLanguage() returns a language key my code doesn't know?

I want to fall back to english if someone from e.g. Sweden visits my site (language key: sv). But since I haven't listed sv in my registerAvailableLanguageKeys function, it fails, and the language-keys are shown to the user instead of the translation.

$translateProvider
    .registerAvailableLanguageKeys(['da-dk','en-us'], {
        'en_US': 'en-us',
        'en_UK': 'en-us',
        'da': 'da-dk',
    })
    .determinePreferredLanguage();

`$translateProvider.fallbackLanguage(['en-us'])`? http://angular-translate.github.io/docs/#/api/pascalprecht.translate.$translateProvider — Philipp Gayret, Aug 29 '14 at 11:02
@Philipp fallbackLanguage() solves another problem. If a translation-table doesn't have a specific key, the translation from the fallback language will be used. My problem is that I want to have a fallback if a user with an unknown locale visits my site, the english language should be selected as the preferred language. — swenedo, Aug 29 '14 at 11:10
Hi @swenedo, would you accept my answer? after 2y, I believe it was the right one. — Adriano Spadoni, Mar 15 '17 at 10:17

Adriano Spadoni · Accepted Answer · 2017-03-15T10:15:15.500

20

Using wildcards is the best solution, you can just set en_* as follows:

    $translateProvider.useStaticFilesLoader({
       prefix: 'locales/locale-',
       suffix: '.json'
    })   

    .registerAvailableLanguageKeys(['en','fr','pt'], {
       'en_*': 'en',
       'fr_*': 'fr',
       'pt_*': 'pt',
       '*': 'en'
    })

    .determinePreferredLanguage()

    .fallbackLanguage('en');

for files:

locales/locale-en.json
locales/locale-fr.json
locales/locale-pt.json

edited Mar 15 '17 at 10:15

answered May 27 '15 at 20:15

Adriano Spadoni

4,540
1
25
25

Awesome! I also have a '*' wildcard to go back to 'en' – Robert Cutajar Mar 22 '16 at 17:02

score 6 · Answer 2 · answered Feb 13 '15 at 16:40

Hey I had a similar issue to yours, the way I solved it was :

I added this to my app.config

  $translateProvider.useStaticFilesLoader({
      prefix: 'the/directory/locale-',
      suffix: '.json'
    })

  .registerAvailableLanguageKeys(['en'])

  .determinePreferredLanguage()

  .fallbackLanguage('en');

and this to my app.run:

$rootScope.changeLanguage = function() {
  if(/[a-z]{2}_[A-Z]{2}/.test($translate.use())) {
    $translate.fallbackLanguage($translate.use().split('_')[0]);
  }
}

that way if the browser detects a language such as fr_BE it will try to fall back to fr and then once again en, in your case you would want sv. Also having the registerAvailableLanguageKeys seems to stop the determinePreferredLanguage() causing an error with the non-existant file issue. I hope this helps someone.

The order of .determinePreferredLanguage() and .fallbackLanguage('en') is of essence. I had them the other way around and it didn't work. — JNissi, Mar 20 '15 at 15:22

score 1 · Answer 3 · answered Jan 16 '15 at 19:30

You can use $translateProvider.fallbackLanguage(['en-us']) to determine your fallback language, and $translateProvider.preferredLanguage(langKey)to set your preferred language.

Also note that fallbackLanguage() can have an array of languages as a parameter, which means you can have several ordered fallback languages.

angular-translate - Fallback language for determinePreferredLanguage()

3 Answers3

Linked