Search code examples
javascriptangularjslanguage-translation

Angular-gettext translation service doesn't appear to be working.

I'm having a really hard time understanding what I'm doing wrong and I'm hoping someone can help. I need to build a small app just to practice with angular-gettext. I followed the tutorial here: http://lostechies.com/gabrielschenker/2014/02/11/angularjspart-12-multi-language-support/

My project, however, will not translate. I don't get any errors in the console. I have all of the necessary dependencies and everything appears to be working correctly (grunt, bower, etc.), so it must be in the actual code. Probably a curly brace or something.

Here's my app.js file: 

var app = angular.module('app', ['gettext']);
app.controller("TestCtrl", function($scope){
    app.run(function(gettextCatalog){
        gettextCatalog.currentLanguage = 'de';
        gettextCatalog.debug = true;
    });

});

Index.html:

<!DOCTYPE html>
<html>
<head>

    <title>Translation Sample</title>
    <link rel="stylesheet" type="text/css"
            href="bower_components/bootstrap/dist/css/bootstrap.css"/>
</head>
<body ng-app="app">
<div ng-controller="TestCtrl">
    <p translate>Welcome to my app</p>
    <p translate>We want to test globalization and localization</p>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-gettext/dist/angular-gettext.js"></script>
<script src="app.js"></script>
<script src="translations.js"></script>

</body>
</html>

Gruntfile.js:

module.exports = function(grunt){
    grunt.loadNpmTasks('grunt-angular-gettext');

    grunt.initConfig({
        nggettext_extract:{
            pot: {
                files: {
                    'po/template.pot': ['**/*.html']
                }
            }
        },
        nggettext_compile:{
            all: {
                files: {
                    'translations.js': ['po/*.po']
                }
            }
        }
    })
};

Translations.js:

angular.module('gettext').run(['gettextCatalog', function (gettextCatalog) {
    gettextCatalog.setStrings('de', {
        "We want to test globalization and localization":"Wir wollen testen, Globalisierung und Lokalisierung",
        "Welcome to my app":"Willkommen auf meiner App"
    });
}]);

I know this is long. Thanks for reading and thanks in advance for any suggestions.

Solution

  • This might be an angular-gettext bug: your strings are loaded after you set the language. With recent changes in angular.js, this might break.

    I'll push a fix for that.

    Update: angular-gettext 1.1.2 was released with a fix for this (try it out). Note that in recent versions the use of currentLanguage has been deprecated. You should use gettextCatalog.setCurrentLanguage('de') instead.

    https://angular-gettext.rocketeer.be/dev-guide/api/angular-gettext/