angular-translate-loader

angular-translate loader for webpack

This loader helps to reduce writing the boilerplate code for angular-translate.

Installation

npm install angular --save && npm install angular-translate-loader --save-dev

or

yarn add angular && yarn add angular-translate-loader --dev

Usage

Instead of writing boilerplate code something like this:

var angular = require("angular");
var translations = angular.module('translations', ['pascalprecht.translate']);
 
translations.config(function($translateProvider) {
    $translateProvider.translations('en_US', {
        foo: 'bar',
        bar: {
            baz: 'qux'
        }
    });
});

You can do that in single line:

./index.js

var translations = require('!json!angular-translate?module=translations!./index.json');
 
console.log(translations); // Object { foo: "bar", bar: { baz: "qux" } }

and the loader will do all work for you:

var angular = require("angular");
var translations = {
    foo: "bar",
    bar: {
        baz: "qux"
    }
};
var module;
try {
    module = angular.module("translations");
} catch(err) {
    module = angular.module("translations", ["pascalprecht.translate"]);
}
module.config(["$translateProvider", function($translateProvider) {
    $translateProvider.translations("en_US", translations);
}]);
module.exports = translations;

Also it detects locales in the requested file (please see localeInterpolate option):

./de_DE.json

{
  "foo": "Bar",
  "bar": {
    "baz": "Qux"
  }
}

./index.js

var translations = require('!json!angular-translate?module=translations!./index.json');
 
console.log(translations); // Object { foo: "Bar", bar: { baz: "Qux" } }

var angular = require("angular");
var translations = {
    foo: "Bar",
    bar: {
        baz: "Qux"
    }
};
var module;
try {
    module = angular.module("translations");
} catch(err) {
    module = angular.module("translations", ["pascalprecht.translate"]);
}
module.config(["$translateProvider", function($translateProvider) {
    $translateProvider.translations("de_DE", translations);
}]);
module.exports = translations;

Also if you want to require all translations at once you can do that as well:

./index.js

var angular = require('angular');
 
function requireAll(requireContext) {
    return requireContext.keys().map(requireContext);
}
 
requireAll(require.context('./locales', true, /\.json$/));
 
angular.module('app', ['translations']);

If you want to add some global options you can do that easily:

./webpack.config.js

module.exports = {
    module: {
        rules: [{
            type: 'javascript/auto',
            test: /\.json$/,
            loader: 'angular-translate-loader',
            options: {
                module: 'translations',
                namespaces: ['app', '[dir]'],
                sep: '.',
                defaultLocale: 'de_DE'
            }
        }]
    }
};

Options

Name	Type	Default Value	Description
module	String or String[]	'translations'	Sets name of angular module. Supports interpolations and also [dir].
namespaces	String or String[]	''	Adds namespaces to each translations key. Supports interpolations and also [dir].
sep	String	'/'	Separator for namespaces and module.
localeInterpolate	RegExp or RegExp[] or String or String[]	[/_[a-z]{2}_[A-Z]{2}\./, /_[a-z]{2}\./, /[/\\][a-z]{2}_[A-Z]{2}[/\\]/, /[/\\][a-z]{2}[/\\]/]	Uses to detect locale in resourcePath.
defaultLocale	String	'en_US'	Uses defaultLocale if localeInterpolate fails to detect it.
requireAngular	Boolean	true	Indicates whether to add var angular = require("angular") to generated code or not. Defaults to true.