Angular I18n多语言文本管理：法语文案指定位置问询

首先得明确：自动生成的messages.fr.xlf是Angular CLI从模板提取消息后生成的基础模板文件，确实不建议手动直接修改它——因为下次提取消息时，CLI会覆盖这个文件，你的手动修改会丢失。正确的做法是通过以下步骤来管理法语文案：

1. 先给模板中的英文文本添加i18n标记 #

在src/app/app.component.html里，给需要翻译的文本加上i18n属性（最好自定义ID，方便后续定位和维护）：

<!-- 示例：给Hello添加i18n标记，自定义ID为welcomeHeader -->
<h1 i18n="@@welcomeHeader">Hello</h1>
<p i18n="@@welcomeMessage">Welcome to our app!</p>

2. 使用xliffmerge工具维护翻译（官方推荐方案） #

为了避免手动修改自动生成的xlf文件导致内容丢失，我们可以用@ngx-i18nsupport/tooling提供的xliffmerge工具，它能帮我们同步翻译内容，不会覆盖已有的翻译成果：

• 先安装依赖：

  npm install @ngx-i18nsupport/tooling --save-dev
  

• 在项目根目录创建xliffmerge.json配置文件：

  {
    "xliffmergeOptions": {
      "srcDir": "src/locale",
      "genDir": "src/locale",
      "i18nFile": "messages.xlf",
      "i18nBaseFile": "messages",
      "encoding": "UTF-8",
      "defaultLanguage": "en",
      "languages": ["fr"],
      "removeUnusedIds": true,
      "supportNgxTranslate": false,
      "useSourceAsTarget": false
    }
  }
  

• 修改package.json添加脚本，用于一键提取并同步翻译：

  "scripts": {
    "extract-i18n": "ng extract-i18n --output-path src/locale && xliffmerge"
  }
  

• 运行npm run extract-i18n后，工具会在src/locale目录下生成（或更新）messages.fr.xlf，这时候你可以安全地在这个文件的<target>标签中填写法语文案：

  <trans-unit id="welcomeHeader" datatype="html">
    <source>Hello</source>
    <target>Bonjour</target> <!-- 这里填写你的法语翻译 -->
  </trans-unit>
  

  下次再提取新的翻译项时，xliffmerge会自动同步新增内容，完全不会覆盖你已经填写好的法语文案。

3. 配置Angular构建以加载法语文案 #

在angular.json中，为法语环境添加专属的构建和服务配置：

"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "configurations": {
          "fr": {
            "localize": ["fr"]
          }
        }
      },
      "serve": {
        "configurations": {
          "fr": {
            "browserTarget": "your-app-name:build:fr"
          }
        }
      }
    }
  }
}

然后运行法语环境的开发服务器：

ng serve --configuration=fr

这样你的app.component.html就会渲染出你在messages.fr.xlf中填写的法语文案了。

关键提醒 #

永远不要直接修改Angular CLI自动生成的原始messages.fr.xlf，而是通过翻译工具（如xliffmerge）来维护翻译文件，这样能保证翻译内容在后续的消息提取操作中不会丢失。

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