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的使用詳細的變化的使用,前面的幾篇文章中有所提到,這裡不再贅述。