Angular从10升级到14后出现data-table.svg资源冲突错误求助

这个报错的核心原因是打包过程中，有多个不同内容的data-table.svg文件被输出到了同一个路径下，Angular 14的构建工具（基于Webpack 5）对资源冲突的检测比Angular 10更严格，因此触发了这个错误。以下是具体解决步骤：

• 查找并处理重复的SVG文件
  全局搜索项目中所有名为data-table.svg的文件，确认是否存在于不同目录（比如src/assets、组件私有目录、第三方库目录等）。如果发现重复：

  • 删除不需要的冗余文件；
  • 保留所有需要的文件时，重命名其中一个（例如改为data-table-custom.svg），同时同步更新代码中对应的引用路径。

• 检查angular.json的资源配置
  打开angular.json，定位到项目的assets配置节点，检查是否存在重复的资源引用：

  • 比如同时配置了"src/assets"和"src/app/xxx/data-table.svg"，而src/assets下也有同名文件，就会导致冲突；
  • 移除重复的配置条目，确保每个资源只被打包一次。

• 排查第三方依赖冲突
  如果项目使用了第三方UI组件库，确认库中是否也包含data-table.svg文件，与项目自有文件重名：

  • 将第三方库升级到适配Angular 14的最新版本，部分库在新版本中会调整资源命名避免冲突；
  • 若升级不可行，直接重命名项目自身的SVG文件。

• 清理构建缓存
  执行以下命令清理旧构建缓存，再重新构建项目：

  ng clean
  ng serve
  

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