Angular 5 i18n：Webpack+JIT编译环境下生成messages.xlf文件的方案咨询

我之前在维护Angular 5 JIT项目时也碰到过一模一样的问题——官方文档全是CLI的玩法，用Webpack的话得靠AngularCompilerPlugin来搞定，下面是我踩坑后验证过的完整配置流程：

1. 先装必要依赖 #

首先得把Angular编译器相关的Webpack插件和CLI工具装上，这俩是核心：

npm install @angular/compiler-cli @ngtools/webpack --save-dev

2. 配置Webpack里的AngularCompilerPlugin #

在你的webpack.config.js里引入插件，重点加上i18n相关的配置项，指定输出文件、格式和基准语言：

const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

module.exports = {
  // ...你的其他Webpack配置（entry、output、module规则等）
  plugins: [
    new AngularCompilerPlugin({
      tsConfigPath: './tsconfig.json', // 指向你的项目ts配置文件
      mainPath: './src/main.ts', // 项目入口文件
      sourceMap: true,
      // 关键的国际化配置
      i18nOutFile: './src/locale/messages.xlf', // 生成的xlf文件路径
      i18nOutFormat: 'xlf', // 输出格式，支持xlf/xlf2/xmb等
      i18nLocale: 'en' // 你的基准语言（即模板里写的原始语言）
    })
  ]
};

3. 调整tsconfig.json的编译选项 #

Angular 5还没有Ivy编译器，所以要确保angularCompilerOptions里关闭Ivy，同时开启必要的模板检查：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"]
  },
  "angularCompilerOptions": {
    "enableIvy": false,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

4. 执行构建生成messages.xlf #

运行你的Webpack构建命令（比如npm run build），构建完成后，你指定的路径下就会生成包含所有i18n标签文本的messages.xlf文件了。

额外注意点 #

• 如果发现某些组件的i18n文本没被提取，检查组件的templateUrl路径是否正确，或者Webpack有没有正确处理.html文件的解析。
• 因为你用的是JIT模式，后续加载翻译文件时，要在根模块里通过TRANSLATIONS和TRANSLATIONS_FORMAT提供者注入，比如：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core';
import { AppComponent } from './app.component';

// 这里可以根据语言动态加载，比如用fetch或者静态import
const translations = require('./locale/messages.fr.xlf');

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [
    { provide: TRANSLATIONS, useValue: translations },
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者BeetleJuice