运行 Angular i18n时如何设置messages.xlf输出位置?

How to set the messages.xlf output location when running Angular i18n?

我正在使用 angular's i18n tools 并已按照建议将 messages.xlf 输出移动到与默认位置不同的文件夹(新目录:\app\locale)。

当我重新运行时

>npm run i18n

即使在新添加的app/locale目录下,messages.xlf文件输出到默认位置

如何指定输出 messages.xlf 文件的输出位置以防止每次重新生成它时都必须移动它?

这个有用吗?感觉不仅仅是一个简单的代码示例 http://rolandoldengarm.com/index.php/2016/10/17/angular-2-automated-i18n-workflow-using-gulp/

这个答案的有用方面是 Roland Oldengarm 的 gulp 命令,它获取 i18n 的输出并自动合并到指定的语言环境 messages.xlf 文件中:

I’m using a couple of gulp plugins, you’ll need to add as devDependencies with:

npm i --save-dev gulp-cheerio gulp-modify-file gulp-rename gulp-run merge-stream run-sequence

The final set of gulp tasks: var sourceElements = []; gulp.task('i18n-get-source', function() { return gulp.src('./src/i18n/messages.en.xlf') .pipe(cheerio({ run: function ($, file) {

 $('trans-unit').each(function() { 
 sourceElements.push($(this));
 }); 
 },
 parserOptions: {
 xmlMode: true
 }
 }));
});

gulp.task('i18n-merge-to-translations', ['i18n-get-source'], function() {
 var languages = ['zh'];
 var tasks = [];
 for(var language of languages) {
 var path = "./src/i18n/messages." + language + ".xlf";
 tasks.push(
 gulp.src(path)
 .pipe(cheerio({
 run: function ($, file) {
 var sourceIds = [];
 for (var sourceElement of sourceElements) {
 var id = $(sourceElement).attr('id');
 sourceIds.push(id);
 var targetElement = $('#' + id);
 if (targetElement.length == 0) {
 // missing translation
 $('body').append(sourceElement);
 }
 }
 // now remove all redundant elements (i.e. removed)
 $('trans-unit').map((function() {
 var id = $(this).attr('id');
 var existing = sourceIds.find((item) => { return item == id} );

 if (!existing) {
 console.log("REMOVING");
 // remove it 
 $('#' + id).remove(); 
 } 
 }));


 } ,
 parserOptions: {
 xmlMode: true
 } 
 }))
 .pipe(gulp.dest('./src/i18n')));
 }
 return mergeStream(tasks);
})


// run ng-xi18n
gulp.task('i18n-extract-xlf', function() {
 return run('ng-xi18n').exec();
});



// create .ts files for all .xlf files so we can import it 
gulp.task('i18n-xlf2ts', function () {
 return gulp.src("./src/i18n/*.xlf")
 .pipe(rename(function (path) {
 path.extname = ".ts"
 }))
 .pipe(modifyFile(function (content, path, file) {
 var filename = path.replace(/^.*[\\/]/, '')
 var language = filename.split(".")[1].toUpperCase();
 return "export const TRANSLATION_" + language + " = `" + content + "`;";
 }))
 .pipe(gulp.dest("./src/i18n"));
});

// copy all source values to the target value as a default translation and make that our English translation
gulp.task('i18n-default', function() {
 return gulp.src('./messages.xlf')
 .pipe(cheerio({
 run: function ($, file) {
 // Each file will be run through cheerio and each corresponding `$` will be passed here.
 // `file` is the gulp file object

 $('source').each(function() {
 var source = $(this);
 var target = source.parent().find('target');
 //source.text(source.text().toUpperCase());
 target.html(source.html());
 }); 
 },
 parserOptions: {
 xmlMode: true
 }

 }))
 .pipe(rename('messages.en.xlf'))
 .pipe(gulp.dest("./src/i18n"))
});

您可以向 tsconfig.json 添加一个新选项来告诉 angular 编译器将文件输出到哪里。

{
  "compilerOptions": {
    //your normal options...
  },
  "angularCompilerOptions": {
    "genDir": "./app/locale"
  }
}

当您执行 i18n 程序时,确保包含 tsconfig.json 位置。

node_modules\.bin>ng-xi18n -p ../../src/tsconfig.json