Andre Andre - 15 days ago 6
AngularJS Question

How to show translations using Angular-Translate?

Angular-translate in combination with partial-loader only shows the key and not the actual translation. I've tried everything but can't seem to locate the mistake. No errors are logged.

This is my code:

app.js

var app = angular.module('myapp', [
'ngRoute',
'appRoutes',
'pascalprecht.translate',
'angularTranslate',
'HomeCtrl'
]);

angular.module('angularTranslate', ['pascalprecht.translate'])
.config(function($translateProvider, $translatePartialLoaderProvider ) {
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: '/languages/{lang}/{part}.json'
});

$translateProvider.preferredLanguage('nl');

});


So the templates are loaded from /languages/{lang}/{part}.json

HomeCtrl.js

angular.module('HomeCtrl', []).controller('HomeController',
function($scope, $translate, $translatePartialLoader) {

$translatePartialLoader.addPart('home');
$translate.refresh();

});


In Express I have this route to ensure that the files are actually returned instead of routed to Angular:

app.get('/languages/:lang/:part', function(req, res) {
res.sendFile(req.params.lang + '/' + req.params.part, { root: '././languages' });
});


home.json

{
"HOMETITLE" : "Geweldige Whatsapp gesprekken.",
}


home.html

{{ "HOMETITLE" || translate }}


And finally I have linked everything in index.html using this order:

<script src="../libs/angular/angular.js"></script>
<script src="../libs/angular-route/angular-route.js"></script>
<script src="../libs/angular-resource/angular-resource.js"></script>
<script src="../libs/angular-translate/angular-translate.js"></script>
<script src="../libs/angular-translate-loader-partial/angular-translate-loader-partial.js"></script>

<script src="../js/controllers/HomeCtrl.js"></script>
<script src="../js/appRoutes.js"></script>
<script src="../js/index.js"></script>


So to restate my problem: only HOMETITLE is displayed instead of the correct translation. Any help is greatly appreciated!

Answer

From my experience with angular translate a few different issues could be happening here which is hard to pin down because your environment plays a factor into this, if you had a github repo I could clone I could be certain.

  1. You just have a formatting problem on your translate like one of the other people have stated, {{ "HOMETITLE" | translate }} You can see here for other possible ways of formatting the translation. I have run into issues using the filter translation with partial and external file loading, I would strongly recommend if you are going to be using partial loading then you only use attributes for setting your translations such as

    http://angular-translate.github.io/docs/#/guide/05_using-translate-directive

  2. Your partial file loader is running into a race condition and it is resolving the {{ "HOMETITLE" | translate }} before you actually get the translations back. Since you can use default translations with partial loading I would suggest putting in a default translation in your translate provider config to make sure that is not the case. Something as simple as what some of the other users have described as

    $translateProvider.translations('nl', {
      "HOMETITLE" : "Geweldige Whatsapp gesprekken.",
    });
    
    $translateProvider.preferredLanguage('nl');
    $translateProvider.forceAsyncReload(true);
    

Adding translateProvider.forceAsyncReload(true); to the end of the config will force a refresh. However I would recommend that you make the translation slightly different then the json file so you can see if that is the case before adding the force reload.