Angular i18n生成XLF时source标签含空格导致重复条目问题

方法1：强制指定统一的i18n标识 #

给所有语义相同的文本添加一致的i18n-id和i18n-description，Angular提取时会将它们视为同一个条目，忽略文本中的空格差异。

修改模板代码示例：

<eld-error-message 
  i18n="Form validation error@@formValidation.moreInfo" 
  *ngIf="formSubmitAttempt && !userReportFormGroup.get('message')?.valid"
>
  Please provide more information
</eld-error-message>

其他组件中相同语义的文本也使用完全一致的i18n属性值，这样执行ng extract-i18n时，所有对应文本会合并到同一个<trans-unit>中，不受首尾空格影响。

方法2：修改i18n提取命令的空白处理参数 #

Angular的extract-i18n命令支持--trim参数，提取时会自动去除文本首尾的空白字符，避免因换行缩进产生的空格差异。

在package.json中更新提取脚本：

{
  "scripts": {
    "extract-i18n": "ng extract-i18n --trim"
  }
}

执行npm run extract-i18n后，提取出的XLF文件中所有文本的首尾空格都会被去除，自然不会生成重复条目。

方法3：用xliffmerge工具自动合并重复条目 #

如果已生成带重复条目的XLF文件，可使用xliffmerge工具自动合并去除首尾空格后内容相同的条目：

1. 安装依赖：

npm install xliffmerge --save-dev

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

{
  "xliffmergeOptions": {
    "removeUnusedIds": true,
    "mergeMatchingTransUnits": true,
    "trimSource": true
  }
}

3. 运行工具处理XLF文件：

npx xliffmerge en src/locale/messages.xlf

工具会自动匹配内容一致的条目并合并，同时保留所有上下文信息。

方法4：调整组件的空白保留策略 #

在组件元数据中设置preserveWhitespaces: false，Angular会自动去除模板中文本节点的多余空白（包括换行和缩进）：

@Component({
  selector: 'app-user',
  templateUrl: './user.html',
  preserveWhitespaces: false
})
export class UserComponent {}

注意：该设置会影响组件内所有文本的空白处理，若有需要保留空格的场景需单独处理。

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