三天前，我为一家本地公司启动了一个新的 Angular 项目，他们今天告诉我，他们希望他们的 Web 应用程序使用法语和英语。
所以我发现angular-gettext模块似乎是一个很好的解决方案。
我遵循了他们的官方教程（使用 Grunt），尽管遇到了一些困难，但我还是找到了没有错误的方法......但它仍然对我不起作用！
我将一些文本index.html与指令一起放入文件translate中，以测试我的配置。事实上，这个文件不会包含任何东西，除了<app-root></app-root>应答器。
所以让我们从 myGruntfile.js和它的两个任务开始：
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', []);
};
我使用以下代码myApp在文件中声明了模块：app.js
var app = angular.module("myApp", [gettext]);
app.run(function (gettextCatalog) {
gettextCatalog.setCurrentLanguage('fr');
});
因此，当我运行我的grunt nggettext_extract命令时，grunt nggettext_compile一切正常，我po folder的template.pot文件和我js folder的文件都有translations.js。我使用它进行了翻译poedit software，结果是我的fr.po文件。
这是我translations.js生成的文件：
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 */
}]);
本教程希望我将我添加<script>到index.html文件中，但使用angular-cli我将它们添加到我的angular-cli.json文件中：
"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"
],
所以对我来说，我做了所有事情，我的句子应该是法语而不是英语，但它不起作用......如果你能帮助我，那就太好了！