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

  。

总结

基本上升级只需要几分钟就可以完成，恩，若有更多未包含的细节，欢迎指正。