Ng-zorro-antd: NG-ZORRO v1 升级指南

Created on 12 Jun 2018 · 10Comments · Source: NG-ZORRO/ng-zorro-antd

NG-ZORRO v1 升级指南

本指南适用于当前版本 ng-zorro-antd >= 0.7.x;
如果在升级过程中遇到问题，欢迎提出。提问前请阅读如何向开源社区提问题
如果发现本指南存在遗漏/错误，请指出!
或者你遇到了新的问题并解决了，欢迎补充!

开始之前

首先确保你的环境满足以下要求，不确定请直接安装最新 Node.js。

node >= 8.9.0
npm  >= 5.5.1

创建新的分支，或者使用其他方式备份当前项目。
删除项目下 package-lock.json 文件。

升级步骤

第一步 - 升级 Angular CLI

这一步会自动生成最新的配置文件，在项目下执行：

$ npm install -g @angular/cli
$ npm install @angular/cli
$ ng update @angular/cli

第二步 - 升级 Angular 相关依赖

这一步会升级 TypeScript, RxJs 以及 @angular/{packages} 的相关依赖，在项目下执行：

$ ng update @angular/core
$ ng update

第三步 - 升级 NG-ZORRO

在项目下执行：

$ npm install ng-zorro-antd@latest --save

删除 forRoot, 在 app.module.ts 中修改:

@NgModule({
  imports     : [
-    NgZorroAntdModule.forRoot()
+    NgZorroAntdModule
  ]
})

接下来根据以下情况选择修复样式：

情况一无自定义样式

在项目下的 angular.json 中找到 styles 属性，按以下方式修改：

"styles": [
-  "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
+  "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css"
]

情况二有自定义样式

执行以下命令，降级 less 到 2.7 版本为什么？

npm install [email protected] -D

找到引入过 ng-zorro-antd 的样式文件，按照以下方式修改:

- @import "~ng-zorro-antd/**";
+ @import "../node_modules/ng-zorro-antd/**";

第四步修复 RxJs

安装引入路径修复工具 npm install -g rxjs-tslint

在项目下运行 rxjs-5-to-6-migrate -p src/tsconfig.app.json (rxjs 使用量大的会比较慢)

此时运行 ng serve ，你可能会看见很多 rxjs 的错误信息。接下来将报错的文件按照以下方式修改：

操作符(operators) 统一在 rxjs/operators 中引入。
Observable 创建函数统一在 rxjs 中引入。
操作符(operators) 在 pipe 中使用。
需要重命名的或弃用的到这里查看。

例子（之前）

import { Observable } from 'rxjs';

Observable.fromEvent(inputRef, 'input')
.debounceTime(500)
.distinctUntilChanged()
.subscribe(() => { ... })

例子（之后）

import { fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

fromEvent(inputRef, 'input')
.pipe(
  debounceTime(500),
  distinctUntilChanged()
).subscribe(() => { ... })

常见问题

Inline JavaScript is not enabled

ERROR in ./src/app/pages/xxx/index.less
Module build failed: 

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in xx/node_modules/ng-zorro-antd/src/style/color/bezierEasing.less (line 110, column 0)
ERROR in ./src/styles.less (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./src/styles.less)

降级 less 到 2.7，npm install [email protected] -D

less wasn't found

ERROR in ./xxx/index.less
Module build failed: 

@import "~ng-zorro-antd/src/style/color/colors.less";
^
'~ng-zorro-antd/src/style/color/colors.less' wasn't found. Tried - xxx/~ng-zorro-antd/src/style/color/colors.less,~ng-zorro-antd/src/style/color/colors.less
      in /Users/hsuanlee/Projects/stream-6.0/src/theme.less (line 1, column 0)
ERROR in ./src/styles.less (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./src/styles.less)

修改从 node_modules 中引入样式文件中的的路径

- @import "~ng-zorro-antd/**";
+ @import "../node_modules/ng-zorro-antd/**";

Missing locale data for the locale '..'..

请在 main.ts 或 app.module.ts 添加以下代码注册国际化。

import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';

registerLocaleData(zh);

RxJs

查看官方升级指南

Announcement

Source

hsuanxyz

👍9

Most helpful comment

不降级less的一种解决办法，新建patch.js,内容为：

const fs = require('fs');
const styles = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/styles.js';

fs.readFile(styles, 'utf8', function (err, data) {
  if (err) {
    return console.log(err);
  }
  const result = data.replace(/Object.assign\(\s*{\s*sourceMap\s*:\s*cssSourceMap\s*}\s*,\s*lessPathOptions/, 'Object.assign({ sourceMap: cssSourceMap,javascriptEnabled: true }, lessPathOptions');
  fs.writeFile(styles, result, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});

package.json 添加脚本

"postinstall": "node patch.js"

cryle on 13 Jun 2018

👍3

All 10 comments

不降级less的一种解决办法，新建patch.js,内容为：

const fs = require('fs');
const styles = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/styles.js';

fs.readFile(styles, 'utf8', function (err, data) {
  if (err) {
    return console.log(err);
  }
  const result = data.replace(/Object.assign\(\s*{\s*sourceMap\s*:\s*cssSourceMap\s*}\s*,\s*lessPathOptions/, 'Object.assign({ sourceMap: cssSourceMap,javascriptEnabled: true }, lessPathOptions');
  fs.writeFile(styles, result, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});

package.json 添加脚本