angular-translate-loader
angular-translateloader 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-devor
yarn add angular && yarn add angular-translate-loader --devUsage
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. |