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/cli@6.0.0，以升級至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/cli@1.7.4
npm install @angular/cli@1.7.4
複製代碼

這個版本對應的是angular 5.2.11

---

【參考資料】

Angular官方升級指南

劉敏的碼經筆記：Angular 5升級到Angular 6

卸載並安裝指定版本Angular CLI

聲明：本文原創，轉發請註明出處，謝謝～