Ng-zorro-antd: NG-ZORRO V10 Upgrade Guide/ 升级指南

[hsuanxyz]

English Version

This guide applies to the current version ng-zorro-antd >= 9;
If you encounter problems during the upgrade process, feel free to comment here.
If you find any errors in this guide, please point out
Or you have encountered a new problem and solved it, welcome to comment here.

Before upgrade

1. Make sure Node.js >= 10.13.
2. Create a new branch, or use other methods to back up the current project.
3. Delete the package-lock.json file.

1.Migration to secondary entry(if needed)

// Before
import {  NzButtonModule, NzNoAnimationModule } from 'ng-zorro-antd';

// After
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';

We have deprecated NgZorroAntdModule and the primary entry in v8, and kept it for 2 versions before removing it in this version, you can use NG-ZORRO TSLint to check/fix the import entry in your project.

(1) Install NG-ZORRO TSLint

```shell script
$ npm i nz-tslint-rules -D

#### (2) Configuration tslint.json

```json
{
  "rulesDirectory": [
    "node_modules/nz-tslint-rules"
  ],
  "rules": {
    "nz-secondary-entry-imports": true
  }
}

(3) Run TSLint to check/fix your project

```shell script
$ tslint --project --fix

### 2.Upgrade dependencies

- Upgrade Angular to 9.x version, ref https://update.angular.io/ .
- Run `ng update @angular/cdk`, if you have used `@angular/cdk`.
- If you have used `[email protected]` in your project, upgrade it to `2.x` version, ref https://github.com/date-fns/date-fns-upgrade.

### 3.Upgrade NG-ZORRO

- Run `ng update ng-zorro-antd`.
- If any warning messages appear in the console, follow the prompts to modify the corresponding code.

### Common Problem

- [Problem with "tslint --project . --fix" · Issue #1 · NG-ZORRO/nz-tslint-rules](https://github.com/NG-ZORRO/nz-tslint-rules/issues/1) 
---

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

## 开始之前

1. 首先确保你 `Node.js` >= `10.13`
2. 创建新的分支，或者使用其他方式备份当前项目
3. 删除项目下 package-lock.json 文件

## 升级步骤

### 1.迁移到二级入口（如果需要）

```ts
// 之前
import {  NzButtonModule, NzNoAnimationModule } from 'ng-zorro-antd';

// 之后
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';

我们已经在 v8 中弃用了 NgZorroAntdModule 和一级入口，并保留了 2 个版本后在此版本中移除，你可以使用 NG-ZORRO TSLint 来检查/修复项目中的引入入口。

(1) 安装 NG-ZORRO TSLint

```shell script
$ npm i nz-tslint-rules -D

#### (2) 配置 tslint.json

```json
{
  "rulesDirectory": [
    "node_modules/nz-tslint-rules"
  ],
  "rules": {
    "nz-secondary-entry-imports": true
  }
}

(3) 运行 TSLint 检查项目中的一级入口并修复

shell script $ tslint --project <tsconfig> --fix

2. 升级相关依赖

• 前往 https://update.angular.io/ 将项目升级到 Angular10。
• 如果你有单独使用 @angular/cdk 请执行 ng update @angular/cdk
• 如果你有单独使用 [email protected] 请先升级到 2.x

3.升级 NG-ZORRO

• 运行 ng update ng-zorro-antd
• 如果控制台出现警告消息请按提示修改对应代码

常见问题

• "tslint --project . --fix" 的问题 · Issue #1 · NG-ZORRO/nz-tslint-rules

[GeoffreyIdks]

Hello,
After run :
ng update ng-zorro-antd

I have this error :

Using package manager: 'npm'
Collecting installed dependencies...
Found 58 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency ng-zorro-antd @ "10.0.0" (was "9.1.2")...
UPDATE package.json (2292 bytes)
✔ Packages installed successfully.
** Executing migrations of package 'ng-zorro-antd' **

▸ Updates NG-ZORRO to v10 [https://github.com/NG-ZORRO/ng-zorro-antd/issues/5775]
✖ Migration failed: Cannot read property 'attributes' of undefined
  See "/tmp/ng-rK59n7/angular-errors.log" for further details.

ng update ng-zorro-antd  26,29s user 2,71s system 149% cpu 19,438 total

Have a solution for this error?

[hsuanxyz]

@GeoffreyIdks Try again, we just released patch version.

$ ng update ng-zorro-antd@latest

[gudara]

Hi,
I have upgrade to V10 successfully. But there is small issue in nzTable. The nzRight is working probably. But nzLeft has some overlapping issue.