angular-translate-loader

> angular-translate loader for webpack

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

Installation

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

or

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

Usage

Instead of writing boilerplate code something like this:



`javascript
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


`javascript
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:

`javascript
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

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

./index.js


`javascript
var translations = require('!json!angular-translate?module=translations!./index.json');

console.log(translations); // Object { foo: "Bar", bar: { baz: "Qux" } }
`

`javascript
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

`javascript
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

`javascript
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`. |