如何在Angular6下使用ng-zorro-antd

ng-zorro-antd 受限於 #10430 一直都未發佈 Angular6 版本，雖然早已經準備好 #1404。

這裏的緣由是多重的，antd 的 less 版本須要 JavaScript 的支持，想當初我有想把它轉成 Scss 版本，看到這些我心裏是奔潰的。

而 Less 3.x 認爲支持 JavaScript 是詭異的，所以提供了一個叫 @plugin 看起來更沒那麼詭異來解決 less 調用 JavaScript。

這就像三角戀同樣，antd 那邊沒空重構，Angular Cli 默認又是依賴 less 3.x，雖然這個三角戀只差一行代碼而已 #866。

zorro 支持 Angular6 嗎？

zorro 從初版本開始就以 APF 格式打包，Angular6 最大的改進是來自底層，而非應用層面，所以就應用層面而言不須要更改任何代碼。

惟一你須要改動的即是 rxjs6 的破壞性變動 MIGRATION。

怎麼作？

綜合上述，讓 zorro 支持 Angular6 有兩種方式，畢竟在三角戀還未理清以前，咱們什麼事也作不了。

就應用層面而言，其核心在於 antd less 的編譯以及 rxjs6 的變動。對於後者由於 zorro 內部大量使用 rxjs5 的類庫，在 zorro 未提供 Angular6 版本以前安裝 rxjs-compat 是咱們惟一的選擇。

npm i --save rxjs-compat

而對於前者有兩種方案能夠解決，這也是本文的核心。

降級 Less

Less 2.7.3 版本是 Angular5 所依賴，而且默認是支持 JavaScript，所以只須要降級 Less 版本就能夠正常的使用。

npm i --save less@~2.7.0

對於 yarn 可能會失敗，由於 Angular Cli 依賴 less 3，然而雖然依然可使用 yarn add less@~2.7.0 -E 但好像並不生效，我對 yarn 並不熟悉，但願有人指點這其中的緣由。

失去定製主題

前面一直說終究根源在於 Less 3 對 JavaScript 的支持致使的，好在 ng-zorro-antd 在 0.7.1 時新增了 CSS 版本的樣式，它是一個已經編譯過了 antd 全部樣式文件。

當定製主題不是剛需時，能夠直接在 angular.json 中引入 antd 的 css 文件，來解決 zorro 樣式加載的問題。

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

風險

zorro 0.7.x 已經承諾至 1.0 不會再有破壞性變動，其中 1.0 也標誌者 Angular6 的徹底支持。

所以，屆時你徹底能夠恢復定製主題功能以及移除 rxjs-compat 亦可。

固然，若你的項目有第三方組件還未提供 Angular6 版本的話，那麼這個升級就要先作好調研了，省得蛋疼。