How angular-translate-loader for webpack works?

Question

I'm trying to integrate the webpack loader: angular-translate-loader to my project. The documentation lacks a full example and I can't figure out how to make everything works together.

What I want: Have a "languages" folder at the same level of my root component that will contain the locales for other languages like:

• locale-fr.json
• locale-sp.json

What I tried:

I added this in my webpack.config.js (as per documentation)

module.exports = {
    module: {
           preLoaders: [{
            test: /\.json$/,
            loader: 'json'
        }],
        loaders: [{
            test: /\.json$/,
            loader: 'angular-translate?module=translations'
        }]
    },
    angularTranslate: {
        namespaces: ['app'],
        sep: '.',
        defaultLocale: 'en'
    }
};

And in the root component of my application I got this:

$translateProvider.translations('en', {
  TITLE: "Translation is working",
  ANOTHER_TEXT: "But is it really working"
})
.translations('fr', localFr)
.registerAvailableLanguageKeys(['en', 'cn', 'fr', 'sp'], {
  'gb': 'en',
  'es': 'sp'
})
.preferredLanguage('en')
//See http://angular-translate.github.io/docs/#/guide/19_security for more details about Sanitize
.useSanitizeValueStrategy('escape')
//Remember the choice of Language in the local storage
.useLocalStorage();

The default language obviously works (en) but not the others.

I'm missing something but I can't figure out why.

Does someone know of a sample project using angular-translate-loader and webpack ?

Answer 1

I was stuck on the same thing the whole day, but after a lot of trial and error I've finally found a working solution. I have a similiar set-up as you: I have a folder assets/languages at the root of my project, containing languates in JSON files with the format locale-nl.json.

What worked for me was to import angular-translate directly (together with some extra dependencies) instead of using angular-translate-loader:

npm install --save angular-translate angular-sanitize angular-cookies

I then added this to my app.module.js file (which is what I use instead of index.js):

// No "real" module support yet for angular-translate, wo we have to load these manually.
// Reference: https://github.com/angular-translate/angular-translate/issues/1517
import "angular-sanitize";
import "angular-cookies";
import "angular-translate";
import "angular-translate/dist/angular-translate-loader-static-files/angular-translate-loader-static-files.js";
import "angular-translate/dist/angular-translate-storage-cookie/angular-translate-storage-cookie.js";

Then, I define my module and configure the $translate service as follows:

angular.module(MODULE_NAME, [ "pascalprecht.translate", "ngSanitize", "ngCookies" ])
  .config(['$translateProvider', function($translateProvider) {
    $translateProvider
    .useStaticFilesLoader({
      prefix: "../assets/languages/locale-",
      suffix: ".json"
    })
    .preferredLanguage('en')
    .useCookieStorage()
    .useSanitizeValueStrategy('sanitize');
  }])

My translation files, e.g. locale-nl.json all contain a single object in this format:

{
  "PASSWORD": "Wachtwoord",
  "FORGOTPASSWORD": "Wachtwoord vergeten",
  "SETTINGS": "Instellingen",
  "LOGOUT": "Uitloggen",
  "LASTNAME": "Achternaam",
  "FIRSTNAME": "Voornaam",
  "BIRTHYEAR": "Geboortejaar"
}

Finally, in my HTML code, I call the translations through the $translate directive:

<span translate="SETTINGS">Settings</span>

I don't have time now to create a sample project, but since there were no responses to your question yet I wanted to at least let you what worked for me. I'll see if I have the time to create a sample project this weekend.