如何用@angular/localize实现Angular多environment文件本地化？

问题原因 #

ng extract-i18n 默认只会扫描 tsconfig.json 中 include 字段指定的文件，且通常仅处理主环境文件 environment.ts，导致其他环境文件（如 environment.development.ts、environment.qa.ts）中的 $localize 文本无法被提取。

解决步骤 #

1. 让编译系统识别所有环境文件 #

修改项目根目录下的 tsconfig.json，把所有环境文件加入 include 数组，确保提取命令能扫描到这些文件：

{
  "compilerOptions": {
    // 保留原有编译配置
  },
  "include": [
    "src/**/*.ts",
    "src/environments/environment.*.ts" // 匹配所有环境文件
  ]
}

2. 为环境文本添加唯一i18n标识 #

给每个环境文件里的 $localize 文本加唯一的 @@ID，避免提取时冲突，也方便后续分别翻译：

生产环境（environment.ts）：

export const environment = {
  loginHelpText: $localize`:@@prodLoginHelpText:Prod login message`,
};

开发环境（environment.development.ts）：

export const environment = {
  loginHelpText: $localize`:@@devLoginHelpText:Dev login message`,
};

QA环境（environment.qa.ts）：

export const environment = {
  loginHelpText: $localize`:@@qaLoginHelpText:QA login message`,
};

3. 提取所有环境的本地化文本 #

执行提取命令时，显式指定要包含的环境文件（或依赖修改后的 tsconfig.json 自动扫描）：

ng extract-i18n --output-path src/locale --format json --include src/environments/environment.development.ts src/environments/environment.qa.ts

执行后，src/locale/messages.json 中会包含三个环境的文本条目，每个对应唯一ID。

4. 翻译本地化文件 #

复制 messages.json 生成对应语言的翻译文件（如 messages.zh-CN.json），然后分别翻译每个ID对应的文本：

{
  "prodLoginHelpText": "生产环境登录提示",
  "devLoginHelpText": "开发环境登录提示",
  "qaLoginHelpText": "QA环境登录提示"
}

5. 构建对应环境的本地化应用 #

构建时指定目标环境和语言，Angular会自动加载对应环境的文件和翻译：

# 构建开发环境+中文翻译
ng build --configuration development --localize zh-CN

# 构建QA环境+中文翻译
ng build --configuration qa --localize zh-CN

# 构建生产环境+中文翻译
ng build --configuration production --localize zh-CN

注意事项 #

• 确保 angular.json 中每个环境的配置（如 configurations.development）已启用本地化支持，或直接通过构建时的 --localize 参数指定。
• 如果不同环境的文本属于同一业务场景，也可以考虑把文本统一到主i18n文件，通过环境变量控制加载不同翻译分支，但这种方式需要额外逻辑处理。

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