Angular 7升级到12后运行ng serve出现ngcc备份文件覆盖错误如何解决

根因说明 #

该报错是由于Angular 8及以上版本已官方废弃@angular/http包，替换为@angular/common/http，你从v7升级到v12后仍保留了旧的@angular/http依赖，Ivy兼容编译器ngcc处理废弃包时出现备份文件冲突导致。

修复步骤 #

• 第一步：移除废弃依赖，替换为官方推荐的新包
  执行命令卸载旧包：
  npm uninstall @angular/http
  将项目中所有引用@angular/http的代码替换为@angular/common/http对应的API，二者核心能力一致，仅少量导入、调用语法存在差异。
• 第二步：清理残留缓存文件
  关闭所有正在运行的Angular CLI进程、IDE索引进程后，依次删除以下内容：
  1. 项目根目录下的node_modules文件夹
  2. 项目根目录下的package-lock.json（使用yarn则删除yarn.lock）
  3. 所有后缀为.__ivy_ngcc_bak的ngcc残留备份文件，Windows环境可直接执行命令批量删除：
     del /s /q node_modules\*..__ivy_ngcc_bak
• 第三步：重新安装依赖启动项目
  执行命令重装依赖：
  npm install
  安装完成后执行启动命令即可正常编译：
  ng serve

临时应急方案 #

如果暂时没有时间完成旧http代码的替换，可以在package.json的scripts配置中添加如下参数：

"postinstall": "ngcc --force"

添加后执行npm install触发自动脚本，会强制跳过ngcc备份文件校验，完成编译后即可启动项目，该方案仅用于临时调试，不建议长期使用。

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