ng-zorro-antd更新Angular6指引

這原本是 ng-alain 的一篇指引，寫得非常随意，昨天 @VTHINKXIE 說能不能把他整理出來，當時我還在高鐵上，今天中午我抽空整理成文章并釋出到知乎，就算是當作如何更新 ng-zorro-antd

[email protected]

至Angular6 （以下簡稱：v6和v5表示不同版本）版本的一個小指引吧。

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

Angular

從 v5 至 v6 就應用層面來講幾乎沒有什麼破壞性變更，而且官網也提供一個 update 基本流程，這個“套路”還是非常可靠的，我們也有三個項目按這個方法很靠譜的更新至Angular6。

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

1、前置條件

移除

node_modules

、

package-lock.json

或

yarn.lock

。

2、調整

package.json

版本号

将所有

@angular

包手動調整為

^6.0.0

，并重新安裝依賴包：

npm i
           

3、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)
           

4、結構調整

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

可以看得出來。

5、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 [email protected]
           

當然，若是更新我們沒辦法這麼做。

但不管怎麼樣，要想使用 v6 的 ng-zorro-antd 都需要先更改版本号

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

前段時間我在如何在Angular6下使用ng-zorro-antd已經描述過主要原因，本文依然從是否定制主題這個角度出來，說說二者更新不同點。

1、不需要定制主題

這是最簡單的，将原：

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

替換成：

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

2、定制主題

受限于 #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

  。

• [email protected]

  替換成

  node_modules/ng-zorro-antd

  。

總結

基本上更新隻需要幾分鐘就可以完成，恩，若有更多未包含的細節，歡迎指正。