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。

以下是我们在升级的过程地一些傻瓜式的完整步骤；可能会有更便捷的方式，欢迎告知。

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 ng-zorro-antd@next

当然，若是升级我们没办法这么做。

但不管怎么样，要想使用 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。
• ~@ng-zorro-antd 替换成 node_modules/ng-zorro-antd。

总结

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