如何解决Visual Studio 2019项目中升级Angular版本出现报错的问题

直接替换ClientApp出现Cannot Get的原因 #

VS2019生成的ASP.NET Core+Angular项目，自带的ClientApp配置了和后端匹配的代理规则、base href、静态资源输出路径，和ng new默认生成的独立Angular项目配置完全不一致。直接覆盖app文件夹时没有同步迁移配置规则，会导致路由匹配失败、资源路径错误，最终触发Cannot Get报错。

跨大版本升级最简稳妥方案（完整保留业务代码） #

适合从Angular 8直接升级到12这类跨度较大的场景：

• 提前备份完整项目，重点留存ClientApp/src、ClientApp/angular.json、ClientApp/tsconfig*.json、ClientApp/package.json四个文件/文件夹
• 全局安装目标版本的Angular CLI，比如升级到12就运行npm install -g @angular/cli@12
• 删除原有ClientApp文件夹，在同级目录运行ng new ClientApp --skip-git --routing=true --style=css，参数要和原有项目保持一致（原有样式用scss就将style参数改为scss，没开路由就把routing设为false）
• 对比新旧项目的配置文件：
  • 把旧package.json中你自行引入的业务依赖（比如UI组件库、工具库）复制到新package.json中，运行npm install完成安装
  • 对照旧angular.json，修改新配置的outputPath、proxyConfig、assets自定义资源路径、serve端口等参数，和旧项目保持一致
  • 对照旧tsconfig.json，把自定义路径别名、编译规则同步到新配置中
• 将旧项目的src/app、src/assets、src/environments文件夹覆盖到新生成的src目录下
• 先运行ng build做一次打包测试，根据控制台提示修复废弃API报错：比如Angular9+默认开启Ivy编译，旧版ViewChild需要补充static参数，HttpModule要替换为HttpClientModule等
• 打包无报错后，再用ng serve或者VS启动项目即可正常运行

官方升级工具正确用法（适合连续小版本升级） #

Angular官方ng update工具不支持跨多个大版本直接升级，你之前升级失败大概率是跳版本操作，正确流程如下：

• 先升级到Angular9：全局安装npm install -g @angular/cli@9，项目内运行ng update @angular/core@9 @angular/cli@9
• 修复Angular9的所有运行报错，确认项目能正常启动后再升级到10：运行ng update @angular/core@10 @angular/cli@10
• 按同样逻辑依次升级到11、12，每升级一个大版本都要先解决完当前版本的所有报错再往下走
• 遇到依赖冲突报错时，可以在命令末尾加--force参数强制升级，升级完成后再调整不兼容的第三方包版本

升级到Angular10常见报错解决方案 #

你提到的升级10的报错，90%以上属于以下三类问题，按顺序排查即可：

• Node版本不符合要求：Angular10仅兼容12.18.x、14.15.x两个大版本的Node，版本过高或过低都会触发编译报错
• 第三方依赖不兼容：先将项目里的第三方包升级到支持Angular10的对应版本，再执行Angular升级操作
• 全局CLI与本地CLI版本不一致：升级前必须先把全局Angular CLI版本升到和要升级的目标版本一致

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