Angular 10升级到14后favicon.ico替换失败问题求助

问题背景 #

从Angular 10升级到14后，原fileReplacements配置用于替换favicon.ico的方式失效，报错如下：

Error: Schema validation failed with the following errors:
  Data path "/fileReplacements/1" must have required property 'src'.
  Data path "/fileReplacements/1/replace" must match pattern "\.(([cm]?j|t)sx?|json)$".
  Data path "/fileReplacements/1" must match exactly one schema in oneOf.

尝试通过assets配置替换时，又出现错误：

✖ Copying of assets failed.
Unable to copy assets: ENOTDIR invalid cwd E:/PROJECTS/myproj/src/favicon.ico

错误原因 #

1. fileReplacements限制：Angular 12+版本对fileReplacements的Schema做了严格限制，仅支持替换.js/.ts/.json这类代码文件，静态资源（如.ico）不在支持范围内，因此原配置触发验证错误。
2. assets配置错误：之前的assets配置中，input字段被设置为单个文件路径，但该字段要求指向目录，系统将文件当作目录处理，因此抛出ENOTDIR错误。

解决方案 #

方案1：直接替换默认Favicon路径 #

修改angular.json中的assets数组，将默认的src/favicon.ico替换为目标文件路径即可，构建时会自动将该文件复制到输出根目录：

"assets": [
  "src/images/my/favicon.ico", // 替换原有的src/favicon.ico
  "src/assets",
  "src/web.config",
  "src/manifest.json",
  {
     "glob": "**/*",
     "input": "src/images/my",
     "output": "assets/images"
  }
]

方案2：按环境区分替换Favicon #

如果需要根据开发/生产等不同环境使用不同Favicon，可在angular.json的configurations节点下针对不同环境配置assets数组：

"configurations": {
  "production": {
    "assets": [
      "src/images/my/prod-favicon.ico",
      "src/assets",
      "src/web.config",
      "src/manifest.json",
      {
         "glob": "**/*",
         "input": "src/images/my",
         "output": "assets/images"
      }
    ],
    // 其他生产环境配置项
  },
  "development": {
    "assets": [
      "src/favicon.ico",
      "src/assets",
      "src/web.config",
      "src/manifest.json",
      {
         "glob": "**/*",
         "input": "src/images/my",
         "output": "assets/images"
      }
    ],
    // 其他开发环境配置项
  }
}

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