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_modulespackage-lock.jsonyarn.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.jsonbrowserslist 节点转换成 ./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.jsondevDependencies 增加:

devDependencies: [
  "less": "~2.7.0",
  "less-loader": "~4.0.0"
]

当依然遇到无法找到 ng-zorro-antd.less 文件时,相当程度是 less 路径因素,主要包括:

  • 使用 cnpm 安装依赖包,其软链接破坏了实质的包路径,使用 npmyarn
  • ~@ng-zorro-antd 替换成 node_modules/ng-zorro-antd

总结

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

你可能感兴趣的:(前端构建,前端,ng-zorro,antd,angular2)