Angular 5 升级至Angular 7

根据升级建议，应该先从Angular 5升级至Angular 6，再从Angular 6升级至Angular 7。

本文内容“升级前-升级”适用于想从Angular 5升级至Angular 6的小伙伴；

本文内容“升级后”适用于想从Angular 6升级至Angular 7的小伙伴；

ng --version可查看当前版本

升级前

1.HttpModule和Http Service 切换到 HttpClientModule和HttpClient Service

如果项目中有用到HttpModule和Http Service，把它们切换到HttpClientModule和HttpClient Service。

HttpClient有几个特性：

• 不需要调用.json()来映射返回的数据到json格式，默认就是json格式
• 支持拦截器

具体可以参考：HttpClient

2.如果有从@ angular / core导入任何动画服务或工具，则应从@ angular / animations导入它们

3.ngOutletContext替换为ngTemplateOutletContext

4.CollectionChangeRecord替换为IterableChangeRecord

升级

1.确保使用的是Node 8或更高版本

2.升级Angular CLI（全局和本地）

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli
复制代码

可在每行后面加@你想要的版本号，例如：npm install -g @angular/[email protected]，以升级至Angular6。

3.迁移配置到当前版本的angular.json

ng update @angular/cli --migrate-only --from=1
复制代码

ps：Angular5以下的配置文件名是angular-cli.json

4.升级Angular框架包到v6，以及升级RxJS和TypeScript。

ng update @angular/core
复制代码

5.使用ng update查看更新情况

如果仍有需要更新的内容，会显示当前版本号和最新版本号的对比。

升级后

使用rxjs-tslint自动更新规则删除已弃用的RxJS 6功能

对于大多数应用程序，这将意味着运行以下两行命令：

npm install -g rxjs-tslint

rxjs-5-to-6-migrate -p src/tsconfig.app.json

---

～～以下是彩蛋放送～～

卸载并安装指定版本Angular(降级)

升级后报了一堆错暂时解决不了，想降回原来的版本，怎么办？

1.卸载当前版本的Angular cli

npm uninstall -g @angular/cli
npm uninstall @angular/cli
复制代码

2.清除缓存，确保卸载干净

npm cache verify 
复制代码

无法卸载？强制执行：npm cache verify --force

卸载完记得ng --version确认一下哦

3.安装指定版本

npm install -g @angular/[email protected]
npm install @angular/[email protected]
复制代码

这个版本对应的是angular 5.2.11

---

【参考资料】

Angular官方升级指南

刘敏的码经笔记：Angular 5升级到Angular 6

卸载并安装指定版本Angular CLI

声明：本文原创，转发请注明出处，谢谢～

转载于:https://juejin.im/post/5c1b54356fb9a049e82b7b38