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。

总结

基本上升级只须要几分钟就能够完成，恩，如有更多未包含的细节，欢迎指正。