这原本是 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
。
总结
基本上升级只需要几分钟就可以完成,恩,若有更多未包含的细节,欢迎指正。