Angular-translate always using english

Question

Hopefully someone here can help me figure out what is going on. I have an Angular 1.5.8 app, using angular-translate 2.15.2. I have language files set up for English and Japanese and can swap languages at runtime, but the default language on page load is always 'en'. I've set my computer language to Japanese, but I can't get my site to default to that language.

Here is my translations config:

'use strict';

(function() {
    angular.module('app')
        .config(translation);

/**
 *  @name translation
 *  @desc Loads the string resource file associated with the selected language code.
 *  @ngInject
 */
function translation($translateProvider) {

    // Specifies mappings of alternative language codes to a root language.
    $translateProvider.registerAvailableLanguageKeys([
        'en',
        'ja',
    ], {
        'en': 'en',
        'en_*': 'en',
        'ja': 'ja',
        'ja_JP': 'ja',
    });
    $translateProvider.useLocalStorage();
    $translateProvider.useSanitizeValueStrategy('escape');
    $translateProvider.useLocalStorage();
    $translateProvider.useStaticFilesLoader({
        prefix: 'assets/languages/strings-',
        suffix: '.json',
    });

    $translateProvider.fallbackLanguage('en');
    $translateProvider.determinePreferredLanguage();
}
})();

I set my computer to Japanese and other sites default to Japanese. If I check the NG_TRANSLATE_LANG_KEY, it is 'en'. If I console log navigator.languages, it is ['ja', 'en', 'en-US']. Navigator.language is 'en'.

I'm at the end of my theories of what to check next. Anyone have an idea?

Vijay Venugopal Menon · Answer 1 · 2017-10-17T16:30:03.390

0

The command below sets the default language:

$translateProvider.preferredLanguage('de');

I tried this on the example plunker below and the language is set to german on page load. Please check.

http://plnkr.co/edit/6ON0weZvpqczHjsW9gfw?p=preview

I could see that you haven't tried above command in your config. Please check if this works.

edited Oct 17 '17 at 16:30

answered Oct 17 '17 at 00:04

Vijay Venugopal Menon

1,510
1
14
20

Right, I'm not trying to set it manually. I going for the detectPreferredLanguage call to pick it up from window.navigator.languages, as described here: https://angular-translate.github.io/docs/#/guide/07_multi-language – Mark Freeman Oct 17 '17 at 13:55
When you do a console.log(window.navigator.languages[0]), does it show Japanese? – Vijay Venugopal Menon Oct 17 '17 at 16:33
Yes, it shows 'ja'. Same with window.navigator.language – Mark Freeman Oct 17 '17 at 17:51
I think its a known issue. See https://github.com/angular-translate/angular-translate/issues/1094 & https://stackoverflow.com/questions/1043339/javascript-for-detecting-browser-language-preference – Vijay Venugopal Menon Oct 17 '17 at 19:53

score 0 · Answer 2 · answered Oct 17 '17 at 12:52

0

As Vijay Menon mentioned:

$translateProvider.fallbackLanguage('en');

This is your fallback, if there are no languages set. And your computer language has nothing to do with it.

How translation works is that it checks in your browsers local storage for a key named NG_TRANSLATE_LANG_KEY, and check's its value and acts. If it is 'en', it will load a file

assets/languages/strings-en.json

answered Oct 17 '17 at 12:52

According to the documentation, this line should be reading from window,navigator.languages & window.navigator.language. $translateProvider.determinePreferredLanguage(); https://angular-translate.github.io/docs/#/guide/07_multi-language – Mark Freeman Oct 17 '17 at 13:53

Angular-translate always using english

2 Answers2