一步一步在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",   //这里设置了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 更強大