一步一步在angular11中添加多语言支持
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中
<div i18n>hello</div> {{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", "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:development,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.参考链接