angular-gettext doesn't work despit displaying no erroe

Question

I started a new Angular project for a local company three days ago and they told me today that they wanted their web application to be in French AND in English.

So I found the angular-gettext module which seemed to be a good solution.

I followed their official tutorial (using Grunt) and despite some difficulties I found the way to have no error....But it still doesn't work for me !

I put some text in the index.html file with the translate directive in order to test my configuration. In fact this file will not contain anything excepted the <app-root></app-root> balise.

So let's begin by my Gruntfile.js and its two tasks :

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    nggettext_extract: {
      pot: {
        files: {
          'po/template.pot': ['src/*.html'] // the index.html file is here
        }
      },
    },

    nggettext_compile: {
      all: {
        options: {
          module: 'myApp'
        },
        files: {
          'src/js/translations.js': ['po/*.po']
        }
      },
    },
  });

  grunt.loadNpmTasks('grunt-angular-gettext');

  // Default task(s).
  grunt.registerTask('extract', ['nggettext_extract']);
  grunt.registerTask('extract', ['nggettext_compile']);
  grunt.registerTask('default', []);
};

I declared myApp module in an app.js file with the following code:

var app = angular.module("myApp", [gettext]);

app.run(function (gettextCatalog) {
  gettextCatalog.setCurrentLanguage('fr');
});

So when I run my grunt nggettext_extract and grunt nggettext_compile command everything is ok, I have my po folder with my template.pot file and my js folder with my translations.js file. I made the translation using poedit software and the result is my fr.po file.

Here is my translations.js file that was generated :

angular.module('myApp').run(['gettextCatalog', function (gettextCatalog) {
  /* jshint -W100 */
  gettextCatalog.setStrings('fr', {"Welcome ladies and gentleman":"Messieurs et Mesdames bienvenues","Welcome to the test zone":"Bienvenue dans la zone de test"});
  /* jshint +W100 */
}]);

The tutorial wanted me to add my <script> in the index.html file but using angular-cli I added them in my angular-cli.json file :

"scripts": [
    "../node_modules/chart.js/dist/Chart.js",
    "../node_modules/hammerjs/hammer.min.js",
    "../node_modules/angular-gettext/dist/angular-gettext.min.js",
    "./js/translations.js",
    "./app.js"
  ],

So for me I did everything and my sentences should be in French and not in English but it doesn't work...If you could help me it would be great !

Answer 1

Angular-gettext is for AngularJS (ie. 1.x), doesn't work with Angular (ie. 2+). NG and angular-cli has awesome built-in i18n support, see: https://angular.io/guide/i18n