前言

光陰似箭，入職現在的公司已經一年多了，回想剛入職時還是第一次接觸到angular，當時angular4出來也沒有多久，所以對這門新技術也是報以期待。
一年多內，我們的產品也從我剛來時的v1.03版本迭代到了v2.0。但在此過程中，我們前端團隊一直忙于業(yè)務功能的開發(fā)，而忽視了“工具”本身的進階。導致angular中很多新的功能甚至是很多新的UI組件不能使用。
在年前開發(fā)完公司產品的v2.0版本之后，我終于能抽出來一些時間為整個項目做一個升級，以下為此次升級的一些步驟已經才到的坑，希望能對小伙們有一些幫助。

1. 開始前準備

1.備份你的項目
2.確保你的環(huán)境滿足一下要求

$ node -v node >= 8.9.0  
$ npm -v npm >= 5.6.0

3.刪除你項目根目錄下的 package-lock.json 文件

2. Angular4升級為Angular5

由于整個項目過于龐大，也是為了試試水，所以在此次升級的過程中，我想先升級為5.0來看看。
查閱了一些資料，發(fā)現Angular官網是有一篇升級指南。
打開升級指南，將初始版本號選擇4.0，升級到的版本號選擇到5.0。點擊Show me how to update!按鈕，查看升級步驟。

image.png

npm install @angular/animations@^5.0.0 @angular/common@^5.0.0 @angular/compiler@^5.0.0 @angular/compiler-cli@^5.0.0 @angular/core@^5.0.0 @angular/forms@^5.0.0 @angular/http@^5.0.0 @angular/platform-browser@^5.0.0 @angular/platform-browser-dynamic@^5.0.0 @angular/platform-server@^5.0.0 @angular/router@^5.0.0 typescript@2.4.2 rxjs@^5.5.2

npm install typescript@2.4.2 --save-exact

或者使用淘寶鏡像cnpm。

升級完之后，如果你的項目中使用了router，會看到使用路由的地方爆一些錯，查閱了一下資料，是Angular5中路由的一些改動，由于在后面的版本中也做了相應的調整，所以在這里我就沒有管它，而是繼續(xù)后面的升級。

3. 升級本地的Angular-cli

在這里我是先卸載原先的Angular-cli，然后再安裝最新版。

$ npm uninstall -g @angular/cli    // 卸載舊版本cli。
$ npm cache clean   // 清除緩存，確保卸載干凈
$ npm install -g @angular/cli@latest  //安裝最新版本的cli

注：如果卸載全局包失敗可以在本地目錄下手動刪除（window10）
C:\Users\HUAWEI\AppData\Roaming\npm\node_modules（一般存在于C盤的用戶文件夾下）
安裝完畢之后使用指令查看：

$ ng -v

4. Angular5到Angular7

升級了本地的Angular-cli之后，就可以對項目進行升級了。
依次執(zhí)行一下命令

npm install @angular/cli
ng update @angular/cli
ng update @angular/core
ng update
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

上面依次更新的是angular/cli,angular/core，以及rxjs。

5. 項目代碼報錯調整

升級完畢之后，打開項目文件，許多代碼可能會報錯，一般都是在你的http方法中。

5.1 Observable和Subject

若是你的代碼中有使用到

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

的地方，則可能會報錯，因為新版本的rxjs做了一些改變，你只需要按以下寫法就可以

import { Observable ,  Subject } from 'rxjs';

5. 2 timeout, map, filter, mergeMap等

同時有用到timeout,map, filter, mergeMap的地方(一般http請求的時候有用到),也需要進行響應調整

import { timeout, map, filter, mergeMap } from 'rxjs/operators'

新版本的timeout,map, filter, mergeMap在rxjs/operators中調用。
原來的引用方式是：

let xhr = this.http
.post(url, data, option)
.timeout(60000)
.toPromise()
.then(res => {
  ...
})

此時也要修改為

let xhr = this.http
.post(url, data, option)
.pipe(timeout(60000))
.toPromise()
.then(res => {
  ...
})

在使用時需要用pipe()盛放起來。
同理：

this.router.events
    .pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => this.activatedRoute),
      map(route => {
        while (route['firstChild']) route = route['firstChild'];
        return route;
      }),
      filter(route => route['outlet'] === 'primary'),
      mergeMap(route => route['data'])
    )
  .subscribe(event => {
    ...
  })

后語

在將項目成功升級之后，就可以開心的使用NG-ZORRO了(原本使用的UI庫為primeng)。在這里安利一波antd，這真的是一個很強大的UI庫，現在前端主流的三大框架vue, react, angular，它都有對應的庫，如angular中的NG-ZORRO。
升級參考：
記NG4 遷移到 NG6 的一次實踐