如何将VS2017创建的ASP.NET Core Angular项目从4.2.5升级至5.2.0？

兄弟，你之前执行的那部分npm命令不完整，只能更新部分核心Angular包，算不上规范的完整升级操作。Angular升级可不是只替换几个核心包就行，得同步搞定配套工具、依赖包、项目配置，还有代码兼容性问题，才能保证项目正常运行。下面给你一套针对VS2017 ASP.NET Core Angular模板的完整升级步骤：

1. 先做好备份，稳字当头 #

升级前一定要把整个项目打包备份，万一配置改崩了，还能回滚，别嫌麻烦，这是最稳妥的第一步。

2. 清理旧依赖，避免冲突 #

打开PowerShell，导航到项目里的ClientApp目录（VS2017的Angular代码都在这儿），执行以下命令清理旧依赖和缓存：

npm cache clean --force
rm -Recurse -Force node_modules
rm package-lock.json

3. 完整升级Angular核心包及配套工具 #

你之前的命令只列了部分核心包，得补全所有必要的包，还要匹配Angular 5对应的工具版本。执行这条完整的安装命令：

npm install @angular/animations@^5.2.0 @angular/common@^5.2.0 @angular/compiler@^5.2.0 @angular/compiler-cli@^5.2.0 @angular/core@^5.2.0 @angular/forms@^5.2.0 @angular/http@^5.2.0 @angular/platform-browser@^5.2.0 @angular/platform-browser-dynamic@^5.2.0 @angular/router@^5.2.0 @angular/cli@1.7.4 --save

注意：Angular 5对应的Angular CLI稳定版本是1.7.x，这里选1.7.4是经过验证的适配版本。

然后升级关键依赖包，Angular 5对这些版本有明确要求：

npm install rxjs@^5.5.10 zone.js@^0.8.26 --save
npm install typescript@2.6.2 --save-dev

解释下：typescript 2.6.2是适配Angular 5的最优版本（要求在2.4.2-2.7之间）；rxjs 5.5.x和zone.js 0.8.26是Angular 5的官方配套依赖版本，不匹配会出各种奇怪的错误。

4. 调整项目配置文件 #

• 找到ClientApp下的tsconfig.json，修改compilerOptions里的配置，确保和Angular 5兼容：

"compilerOptions": {
  "target": "es2017", // 或者保持es5，推荐用es2017提升性能
  "lib": ["es2017", "dom"],
  // 其他原有配置保持不变
}

• 如果项目里有.angular-cli.json（旧版CLI的配置文件），检查apps节点下的root和outDir是否对应你的项目结构，defaults.styleExt是否匹配你用的样式文件格式（css/scss等）。

5. 修复代码兼容性问题 #

Angular 4到5有一些破坏性变更，得检查代码调整：

• Http模块迁移：旧的Http模块已经被标记为过时，Angular 5推荐用HttpClient（从@angular/common/http导入），如果暂时不想全量迁移，也可以继续用旧的，但后续版本会移除，建议逐步替换。
• 表单验证器：Validators.email现在严格遵循RFC标准，之前能通过的不规范邮箱可能会被拦截，需要调整表单验证逻辑。
• 指令重命名：ngOutletContext被改成了ngTemplateOutletContext，代码里用到的话要替换。
• RxJS操作符：推荐用pipeable操作符，比如map、filter要从rxjs/operators导入，而不是用旧的import 'rxjs/add/operator/map'写法：

// 旧写法（不推荐）
import 'rxjs/add/operator/map';
// 新写法（Angular 5推荐）
import { map } from 'rxjs/operators';
// 使用时要包裹在pipe里
this.http.get(url).pipe(map(res => res.data));

6. 适配ASP.NET Core端配置 #

VS2017的模板用Microsoft.AspNetCore.SpaServices托管Angular，得确保.NET端的包也兼容：

• 打开NuGet包管理器，把Microsoft.AspNetCore.SpaServices升级到2.1.x版本（适配ASP.NET Core 2.0+，VS2017的模板一般是这个版本）。
• 检查Startup.cs里的Configure方法，确保spa.UseAngularCliServer(npmScript: "start")配置正确，同时package.json里的start脚本是ng serve。

7. 验证升级是否成功 #

最后执行命令验证：

# 重新安装所有依赖
npm install
# 启动Angular项目测试
npm start

如果Angular项目能正常启动，没有控制台报错，再运行ASP.NET Core项目，访问页面确认整个应用功能正常，升级就算完成了。

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