Angular 入門教程系列：38：升級小結(5.2->6.1)
阿新 • • 發佈：2018-12-18
在前面的文章中也曾經分別提到過，angular6由於存在一些稍大的變化，所以不能像Angular4到Angular5那樣基本無感地進行升級，這裡結合官方提示，簡單整理一下Angular5.2到目前穩定的6.1的升級要點。
升級前後版本：
升級前版本 升級後版本 5.2 6.1
事前準備
變更內容
| V5.2 | V6.1 | 說明 |
|---|---|---|
| HttpModule | HttpClientModule | 修改import與import |
| Http | HttpClient | 修改import與import |
| @angular/core | @angular/animations | 使用animation服務或工具的情況時 |
| ngOutletContext | ngTemplateOutletContext | 事前確認使用狀況 |
| CollectionChangeRecord | IterableChangeRecord | 事前確認使用狀況 |
| Renderer | Renderer2 | 事前確認使用狀況 |
| preserveQueryParams | queryParamsHandling | 事前確認使用狀況 |
| @angular/platform-browser裡的DOCUMENT | @angular/common | 事前確認使用狀況 |
| ReflectiveInjector | StaticInjector | 事前確認使用狀況 |
| versionedFiles | files | 使用了Angular Service worker的狀況下 |
除此之外，還需要確認如下內容：
- tsconfig.json: preserveWhitespaces設定為off（v6預設設定）
- package.json中scripts的使用，所有的cli命令統一使用兩個橫線–傳入引數（POSIX規範）
- ngModelChange行為發生變化，請確認使用相關方式，升級後動作是否正常。
- Typescript使用strict模式的情況下（tsconfig.json的strict被設定為true時）,更新tsconfig.json使strictPropertyInitialization無效，或者在ngOnInit中移除屬性的初期化
更新
更新cli
- Node版本確認：Node8及其以上
- 更新本地和全域性的angular cli
- 修改配置檔案angular.json
可以使用如下命令實現：
sudo npm install -g @angular/[email protected] npm install @angular/[email protected] ng update @angular/cli
更新angular framework
更新Angular framework到v6，以及相應的RxJS和TypeScript版本 ng update @angular/core
更新Angular Material
ng update @angular/material
更新其他package
ng update
rxjs的修改
rxjs可以使用rxjs-compat模式進行相容，對應完畢之後，再移除即可。 關於http和rxjs的使用詳細的變化的使用，前面的幾篇文章中有所提到，這裡不再贅述。