ng-zorro-antd升級Angular6指引

這本來是 ng-alain 的一篇指引，寫得很是隨意，昨天 @VTHINKXIE 說能不能把他整理出來，當時我還在高鐵上，今天中午我抽空整理成文章併發布到知乎，就算是看成如何升級 ng-zorro-antd 1.0.0@next 至Angular6 （如下簡稱：v6和v5表示不一樣版本）版本的一個小指引吧。

而這一過程主要由 Angular、Rxjs、Zorro 三個部分。

Angular

從 v5 至 v6 就應用層面來說幾乎沒有什麼破壞性變動，並且官網也提供一個 update 基本流程，這個「套路」仍是很是可靠的，咱們也有三個項目按這個方法很靠譜的升級至Angular6。

如下是咱們在升級的過程地一些傻瓜式的完整步驟；可能會有更便捷的方式，歡迎告知。

一、前置條件

移除 node_modules、package-lock.json 或 yarn.lock。

二、調整 package.json 版本號

將全部 @angular 包手動調整爲 ^6.0.0，並從新安裝依賴包：

npm i

三、ng update

執行

ng update @angular/cli

這個時間可能會有些長，但成功時接收到如下信息：

DELETE .angular-cli.json
CREATE angular.json (5008 bytes)
UPDATE karma.conf.js (1077 bytes)
UPDATE src/tsconfig.spec.json (788 bytes)
UPDATE package.json (3775 bytes)
UPDATE tslint.json (3230 bytes)

四、結構調整

v6 的文件結構有點小調整，雖然不影響，但你依然須要知道這些變化。

• .angular-cli.json 變成 angular.json

• 若干由根目錄文件轉移至 src 目錄中

  • ./karma.js 放入 src
  • package.json 的 browserslist 節點轉換成 ./src/browserslist 文件形式

• e2e 目錄變化

  • ./protractor.conf.js 放入 e2e
  • e2e 目錄增長 src 目錄且將文件轉移至該目錄中，且注意相關路徑

總體的變化並不大，也很是容易調整，這些調整的根源我認爲是能夠更好的在一個 Angular 項目中使用多應用，這一點重新的 angular.json 能夠看得出來。

五、angular.json

angular.json 是由 .angular-cli.json 轉換而來的，實質的內容依然仍是 .angular-cli.json，只是換了另外一種 Json Schema 的寫法，有關細節我不細說，通常經過 ng update 獲得的是可用的。

路徑

經過 ng update 升級後在 angular.json 的一些路徑是這樣子的： ./../src/index.html，這裏有一個算是默認的小約定，即最好是全部 angular.json 中的路徑都是 Angular 項目的根路徑開始，能夠將這些統一修改成：src/index.html 風格。

Rxjs

rxjs 提供了 MIGRATION 有一些常見（例如throwError 變成 ErrorObservable）名稱變動須要你手動去調整，重點仍是 rxjs/Observable 之類的所有統一使用 rxjs。

總結：無非就是全部 rxjs 的導入如今只須要兩種風格：

import { Observable, BehaviorSubject } from 'rxjs';
import { filter } from 'rxjs/operators';

小技巧：不安裝 rxjs-compat 時你運行會有一大堆 rxjs 未找到對象的大姨媽，仍是很容易升級。

Zorro

ng-zorro-antd 提供了一些 schematics，所以對於新項目來講，只須要建立好一個空的 Angular 項目後，再運行：

ng new zorro --style less
ng add ng-zorro-antd@next

固然，如果升級咱們沒辦法這麼作。

但無論怎麼樣，要想使用 v6 的 ng-zorro-antd 都須要先更改版本號

"ng-zorro-antd": "^1.0.0-rc.0"

前段時間我在如何在Angular6下使用ng-zorro-antd已經描述過主要緣由，本文依然從是否認制主題這個角度出來，說說兩者升級不一樣點。

一、不須要定製主題

這是最簡單的，將原：

"styles": [
  "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
]

替換成：

"styles": [
  "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css"
]

二、定製主題

受限於 #10430，須要將 less 強制降級爲 2.7，在 package.json 的 devDependencies 增長：

devDependencies: [
  "less": "~2.7.0",
  "less-loader": "~4.0.0"
]

當依然遇到沒法找到 ng-zorro-antd.less 文件時，至關程度是 less 路徑因素，主要包括：

• 使用 cnpm 安裝依賴包，其軟連接破壞了實質的包路徑，使用 npm 或 yarn。
• ~@ng-zorro-antd 替換成 node_modules/ng-zorro-antd。

總結

基本上升級只須要幾分鐘就能夠完成，恩，如有更多未包含的細節，歡迎指正。