CODEWITHSUNDEEP
javascriptangularjsangular-translate
smb
smb

Reputation: 589

Angular Translate - Multi Language - Static Files - Race Condition?

I'm currently using angular translate with the static files loader. I'm implementing at least 3 languages currently, however, I've noticed that typically when it's attempting to load the language file sometimes it takes longer to load the language file than it does for the view itself - which results in a partially translated UI. Most of the items on the screen will stay untranslated, but certain ones will be.

I've tried the following, with no changes:

99.9% of all translations are currently being done in the view, e.g.: {{ ::'My Translation Key' | translate }}

What am I missing in trying to resolve this issue? Should I be trying to manually load these language files and set them at an early load time? If so, how do I setup the use of them in the config?

I'm using Angular 1.5.0 and Angular Translate 2.11.1.

TIA!

Upvotes: 0

Views: 378

Answers (1)

smb
smb

Reputation: 589

So this actually was a race condition where the time it was taking to load up the language file initially, was sometimes (not always) longer than it would take angular-translate to static file load the language file.

As far as I could tell, there were two (2) options available - either manually load and setup the language file, or move the language file into separate smaller files themselves. However, I wanted to always be guaranteed moving forward that this wasn't going to be an issue, so I opted to manually load and setup the language file. This actually was fairly simple and required the following:

1) The language file(s) would be loaded at the top of the items in the index.html file.

2) The language file(s) would be assigned a variable in themselves - ie var enUS = { 'LOGIN': 'Login', 'USER': 'User' }

3) The language would be manually setup in the app.config:

app.config(['$translateProvider', function($translateProvider){
    $translateProvider.translations('en_US', enUS); // this is the variable we assigned to the language json in step 2
    $translateProvider.preferredLanguage('en_US');
    $translateProvider.useSanitizeValueStrategy('sanitize');
}]);

That completely fixed all problems across all clients.

Upvotes: 0

Related Questions