如何将Visual Studio 2017模板中的Angular 4升级至Angular 5？

作为经常处理Angular版本升级的开发者，我给你整理了一套适合新手的、从VS2017默认的Angular4模板升级到Angular5的详细步骤，亲测能顺利完成：

1. 先做好备份（重中之重！） #

• 升级前务必把整个项目文件夹复制一份备份，万一升级出问题还能轻松回滚，别嫌麻烦，新手踩坑太常见了😅

2. 修改 package.json 里的依赖版本 #

打开项目根目录下的package.json文件，把所有Angular相关包的版本统一改成5.x的稳定版（推荐用5.2.11，和Angular.io教程版本匹配）：

• 把@angular/animations、@angular/common、@angular/compiler、@angular/core、@angular/forms、@angular/http、@angular/platform-browser、@angular/platform-browser-dynamic、@angular/router这些包的版本从4.2.5改成^5.2.11
• 把@angular/cli（脚手架工具）升级到1.7.4，这个版本是专门适配Angular5的
• TypeScript版本改成2.6.2，这是Angular5官方推荐的版本
• zone.js保持^0.8.14就好，完全兼容Angular5

给你个修改后的依赖片段参考：

"dependencies": {
  "@angular/animations": "^5.2.11",
  "@angular/common": "^5.2.11",
  "@angular/compiler": "^5.2.11",
  "@angular/core": "^5.2.11",
  "@angular/forms": "^5.2.11",
  "@angular/http": "^5.2.11",
  "@angular/platform-browser": "^5.2.11",
  "@angular/platform-browser-dynamic": "^5.2.11",
  "@angular/router": "^5.2.11",
  "core-js": "^2.4.1",
  "rxjs": "^5.5.11",
  "zone.js": "^0.8.14"
},
"devDependencies": {
  "@angular/cli": "1.7.4",
  "@angular/compiler-cli": "^5.2.11",
  "@angular/language-service": "^5.2.11",
  "typescript": "2.6.2",
  // 其他像karma、protractor这些依赖保持原样就行
}

3. 清空旧依赖，重新安装新包 #

• 先删掉项目根目录下的node_modules文件夹（这个文件夹占空间大，直接删就行）
• 如果有package-lock.json文件也一起删掉，避免版本缓存冲突
• 打开VS的Package Manager Console，或者在项目根目录开个命令提示符，运行：

npm install

耐心等它跑完，这个命令会按照你修改后的package.json下载所有匹配版本的依赖包。

4. 处理少量代码兼容性问题 #

Angular4到5的变更非常小，大部分代码都不用改，只有几个点需要注意：

• 替换Http为HttpClient：Angular5官方推荐用HttpClient替代旧的Http模块，更简洁还自带JSON解析。在app.module.ts里把HttpModule换成HttpClientModule导入，然后在服务里注入HttpClient就行，原来的请求代码基本不用改，只是不用再手动.map(res => res.json())了。
• RxJS操作符导入改法：RxJS 5.5+推荐用pipe链式调用，比如原来的this.http.get(...).map(...).filter(...)要改成this.http.get(...).pipe(map(...), filter(...))，而且要从rxjs/operators单独导入操作符（比如import { map, filter } from 'rxjs/operators';）。
• 模板小语法调整：如果模板里用了ngOutletContext，要改成ngTemplateOutletContext，不过默认模板里基本不会用到这个，大概率不用管。

5. 验证升级成功 #

• 运行ng version命令，看看终端里显示的Angular版本是不是5.x，cli版本是不是1.7.4
• 启动项目（按F5或者运行ng serve），看页面能不能正常加载，浏览器控制台有没有报错
• 测试下路由跳转、表单提交这些基础功能，确保一切正常

要是遇到依赖冲突的报错，试试清理npm缓存：

npm cache clean --force

然后重新跑npm install就行。

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