1.新建angular

2.添加@angular/localize

ng add @angular/localize

3.设置默认locale_id，在app.module.ts中

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [{provide: LOCALE_ID, useValue: 'zh' }],
bootstrap: [AppComponent]
})
export class AppModule { }

4.设置翻译文件输出路径，在package.json中

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build ",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"extract-i18n": "ng extract-i18n --output-path src/i18n"
},

5.添加ngx-i18nsupport

npm install ngx-i18nsupport --save-dev

6.在根目录下添加xliffmerge.json

{
"xliffmergeOptions": {
"srcDir": "src/i18n",
"genDir": "src/i18n"
}
}

7.添加翻译合并脚本，在package.json中

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build ",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"extract-i18n": "ng extract-i18n --output-path src/i18n",
"xliffmerge": "xliffmerge --profile xliffmerge.json en"
},

8.在文件中增加翻译文本

HTML中

{{title}}

typescript中

export class AppComponent {
title = 'angular-i18n';

constructor() {
this.title = $localize`world ${'abc'}`;
}
}

9.尝试生成翻译文件

npm run extract-i18n;npm run xliffmerge;

这一步之后在工程的src/i18n文件夹会生成2个文件message.xlf,message.en.xlf

其中message.xlf是从工程中提取的所有待翻译语句，message.en.xlf是留存的已翻译好的文件。

也就是说，每次运行npm run extract-i18n;npm run xliffmerge;，message.xlf会重新生成而message.en.xlf会增量增加，已翻译的内容不会变

10.修改angular.json

{
"projects": {
"ponyracer": {
"projectType": "application",
// …
"i18n": {
"sourceLocale": {
"code": "zh", //这里设置了zh,那么第3步可以不用做
"baseHref": "/zh/"
},
"locales": {
"en": {
"translation": "src/i18n/messages.en.xlf",
"baseHref": "/en/"
}
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
// …
"options": {
// …
"i18nMissingTranslation": "error"
},

      "configurations": {  
        "production": {  
          // ...  
        },  
        "en": {  
          "localize": \["en"\]  
        }  
      }  
    },  
    "serve": {  
      // ...  
      "configurations": {  
        "production": {  
          // ...  
        },  
        "en": {  
          "browserTarget": "ponyracer:build:en"  
        }  
      }  
    }  
    // ...  

}

之后运行ng build --configuration='production,en'将生成英文版的打包文件
运行ng build --prod --localize将同时生成中文和英文的打包文件
11.增加脚本，修改package.json

"scripts": {
"ng": "ng",
"start": "ng serve",
"start-en": "ng serve --configuration=en",
"build": "ng build --prod --localize",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"extract-i18n": "ng extract-i18n --output-path src/i18n",
"xliffmerge": "xliffmerge --profile xliffmerge.json en",
"generate-i18n": "npm run extract-i18n && npm run xliffmerge"
},

12.参考链接

• Internationalization with @angular/localize
• 使用 xliffmerge 讓 Angular i18n 更強大