Angular Tour of Heroes配置AppRoutingModule报ɵngcc0重复声明错误

• 这个报错和你编写的路由业务代码完全无关，本质是Angular 11.x 版本中 Ivy 兼容编译器（ngcc）与 Webpack 打包流程的缓存冲突问题。
• 报错显示路由包编译后的文件内，重复声明了两次同一个ɵngcc0模块导入标识符，属于典型的编译缓存污染：ngcc的作用是给非Ivy环境做Angular包兼容编译，过程中残留了之前生成的__ivy_ngcc__目录缓存，后续打包时babel-loader和@ngtools/webpack加载器对同一份编译产物做了二次处理，直接拼接出重复的导入语句，触发ES模块语法解析失败。
• 该问题刚好在添加AppRoutingModule的环节触发也符合逻辑：此前项目没有完整加载路由依赖，ngcc未对路由包做全量编译，直到引入路由模块、首次触发路由加载时，旧缓存和新生成的编译结果发生叠加，哪怕完全复制教程的示例代码，也会复现这个错误。

• 第一步彻底清理被污染的缓存和依赖
  • 关闭正在运行的本地开发服务
  • 删除项目根目录下的node_modules文件夹
  • 删除根目录下的package-lock.json文件
  • 在项目根目录执行ngcc --clean，清理全局残留的Angular兼容编译缓存
• 第二步重装依赖验证
  • 执行npm install等待依赖安装完成，过程中会自动重新执行ngcc全量编译，生成干净的路由包兼容产物
  • 执行ng serve启动项目，检查路由模块是否可以正常加载
• 如果清理缓存后仍报错，可补充两个兼容配置
  • 修改package.json的启动脚本，把原来的start命令替换为ng serve --vendor-chunk=true，通过将第三方依赖单独拆包的方式，避免Webpack对Angular包的重复解析
  • 检查tsconfig.json配置，确保AOT编译为开启状态（"aot": true），避免JIT编译流程对路由模块的重复处理
• 临时快速跑通的方案：如果不想等待完整排查流程，可以临时在angular.json的构建配置中关闭optimization选项，跳过babel-loader对node_modules内Angular包的二次编译，等路由功能验证通过后再恢复原有配置即可。

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