Andre Andre - 1 month ago 14
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:


var app = angular.module('myapp', [

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



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


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



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' });


"HOMETITLE" : "Geweldige Whatsapp gesprekken.",


{{ "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!


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

  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.",

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.