Angular 19国际化（i18n）配置报错及正确配置方案咨询

问题背景 #

我正在开发Angular 19项目，尝试添加国际化（i18n）功能以支持多语言，已完成以下操作：

• 安装依赖包：npm install @angular/localize --legacy-peer-deps
• 更新tsconfig.json配置
• 更新angular.json配置
• 在src/locale目录创建messages.xlf（英文）和messages.fr.xlf（法文）翻译文件

执行ng serve --configuration=fr或ng serve --configuration=en时，出现报错：

Error: Schema validation failed with the following errors:
  Data path "" must have required property 'buildTarget'.
/Users/ali/angular-applications/YourProjectName/node_modules/rxjs/dist/cjs/internal/util/reportUnhandledError.js:13
            throw err;
            ^

SchemaValidationException [Error]: Schema validation failed with the following errors:
  Data path "" must have required property 'buildTarget'.
    at /Users/ali/angular-applications/YourProjectName/node_modules/@angular-devkit/architect/src/architect.js:38:27 {
  errors: [
    {
      instancePath: '',
      schemaPath: '#/required',
      keyword: 'required',
      params: { missingProperty: 'buildTarget' },
      message: "must have required property 'buildTarget'"
    }
  ]
}

问题 #

1. 如何正确配置angular.json以支持多语言，避免buildTarget错误？
2. 配置Angular i18n时是否还有遗漏步骤？

解决方案 #

1. 修复angular.json中的buildTarget错误 #

报错核心是serve配置未关联对应的buildTarget，Angular需要明确知道启动服务时要使用的构建配置。按以下步骤调整：

步骤1：完善build阶段的多语言配置

在projects -> [你的项目名] -> architect -> build -> configurations中添加语言专属配置：

"configurations": {
  "production": { ... },
  "en": {
    "localize": ["en"],
    "outputPath": "dist/your-project-name/en"
  },
  "fr": {
    "localize": ["fr"],
    "outputPath": "dist/your-project-name/fr"
  }
}

替换your-project-name为实际项目名称。

步骤2：关联serve与build配置

在projects -> [你的项目名] -> architect -> serve -> configurations中，为每种语言绑定对应的构建目标：

"configurations": {
  "production": { ... },
  "en": {
    "buildTarget": "your-project-name:build:en"
  },
  "fr": {
    "buildTarget": "your-project-name:build:fr"
  }
}

步骤3：添加全局i18n配置

在projects -> [你的项目名]节点下新增i18n配置，指定源语言与翻译文件路径：

"i18n": {
  "sourceLocale": "en",
  "locales": {
    "fr": "src/locale/messages.fr.xlf"
  }
}

2. 检查i18n配置的遗漏步骤 #

除已完成操作外，需确认以下关键步骤：

• 标记模板可翻译文本：在组件模板中用i18n属性标记需要翻译的内容，建议添加自定义ID方便管理：

  <h1 i18n="@@welcomeHeader">Welcome to My App</h1>
  

• 提取最新翻译源文件：执行ng extract-i18n --output-path src/locale生成标准的messages.xlf，确保翻译文件基于该源文件维护，避免ID不匹配。
• 验证tsconfig.json配置：确保compilerOptions.types数组包含@angular/localize：

  "compilerOptions": {
    "types": ["@angular/localize"]
  }
  

• 先验证构建命令：先执行ng build --configuration=en和ng build --configuration=fr确认构建正常，再测试serve命令。

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