Angular国际化：避免翻译文件与组件中的字符串重复

核心思路 #

Angular默认逻辑下，sourceLocale（此处为英文）构建不会启用本地化机制，直接渲染组件模板内的文本；只有指定非源语言构建时才会读取对应翻译文件。要实现仅维护翻译文件更新默认语言文本，需将源语言也纳入本地化构建流程，强制它从对应翻译文件加载内容。

步骤1：修改angular.json配置 #

更新项目的i18n和构建配置，把英文（en）加入本地化列表：

...
"projects": {
  ...
  "i18n": {
    "sourceLocale": "en",
    "locales": {
      "de": "src/locale/messages.de.json",
      "en": "src/locale/messages.json" // 添加源语言翻译文件映射
    }
  }
  ...
},
"architect": {
  "build": {
    ...
    "configurations": {
      "de": {
        "localize": ["de"],
        "i18nMissingTranslation": "error"
      },
      "en": { // 添加英文构建配置
        "localize": ["en"],
        "i18nMissingTranslation": "error"
      },
      ...
    },
    ...
  },
  "serve": {
    ...
    "configurations": {
      "de": {
        "browserTarget": "your-project-name:build:de"
      },
      "en": { // 添加英文本地服务配置
        "browserTarget": "your-project-name:build:en"
      }
    }
  }
  ...
}
...

步骤2：修改组件模板 #

清空组件标签内的文本，仅保留i18n的key标识：

<!-- table.component.html -->
<div>
  <p i18n="@@table-no-entries"></p>
</div>

步骤3：构建/运行项目 #

• 构建英文版本：ng build --configuration=en
• 启动英文本地服务：ng serve --configuration=en

完成以上配置后，默认语言（英文）会从messages.json读取table-no-entries对应的文本，德语版本仍从messages.de.json加载内容，彻底避免组件与翻译文件的文本重复维护问题。

注意事项 #

• 使用ng extract-i18n时，由于组件内是空文本，提取生成的基础翻译文件会包含空字符串，此时需手动补全messages.json的对应key值，或直接维护现有翻译文件、不再依赖提取命令生成的基础文件。
• 确保messages.json的locale字段为en，与配置保持一致，避免加载异常。

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