NG-ZORRO V13 Upgrade Guide/ 升级指南

[simplejason]

English Version

This guide applies to the current version ng-zorro-antd >= 13; 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 >= 12.20.
2. Create a new branch, or use other methods to back up the current project.
3. Delete the package-lock.json file.

1.Upgrade dependencies

• Upgrade Angular to 13.x version, ref https://update.angular.io/ .
• Run ng update @angular/cdk, if you have used @angular/cdk.

2.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 Problems

...

---

中文版

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

开始之前

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

升级步骤

1. 升级相关依赖

• 前往 https://update.angular.io/ 将项目升级到 Angular 13。
• 如果你有单独使用 @angular/cdk 请执行 ng update @angular/cdk

2.升级 NG-ZORRO

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

常见问题

...

[zorro-bot[bot]]

Translation of this issue:

WIP NG-Zorro V13 UPGRADE Guide / Upgrade Guide

中文 v

This guide applies to the current version ng-zorro-ANTD> = 13; 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 solid it, Welcome to Comment Here.

Before Upgrade

1. Make Sure Node.js> = 12.20.
2. Create a new branch, or use Other methods to back up the credent project.
3. Delete the package-lock.json file.

1.Upgrade dependencies

• Upgrade Angular to 13.x Version, ref https://update.angular.io/.
• Run ng update @ Angular / CDK, if you have used @ Angular / CDK.

2.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.

CommoBLEMS

`

---

Chinese Version

This guide is suitable for current version NG-Zorro-ANTD> = 13; If you encounter problems during the upgrade process, welcome. Please read [How to issue questions to open source community before questioning] (https://github.com/seajs/seajs/issues/545) If you find that this guide is missing / error, please point out! Or you have encountered a new problem and solved, welcome to add!

before the start

1. First make sure you node.js> = 12.20
2. Create a new branch, or use other way backups the current project
3. Remove the item under the Package-Lock.json file

Upgrade steps

1. Upgrade related dependence

• Go to https://update.angular.io/ to upgrade the project to Angular 13.
• If you have a separate use @ Angular / CDK please execute Ng Update @ Angular / CDK

2. Upgrade NG-Zorro

• Run Ng Update Ng-Zorro-ANTD
• If a warning message appears in the console, please press the prompt to modify the corresponding code.

common problem

`

[qyjs]

When will the latest 13 version be released。

[simplejason]

When will the latest 13 version be released。

Close to release, I think it can be released on December 29th :)

[magnusbakken]

I've upgraded to the new 13 version and everything looks fine for me!

However, I did get this version mismatch warning during installation;

"ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "rxjs@^6.4.0"

I assume this isn't intended?

[qyjs]

pls upgrade rxjs to version7

[cipchk]

@magnusbakken @qyjs Pls trying use yarn instead of NPM to install dependencies.

[magnusbakken]

@magnusbakken @qyjs Pls trying use yarn instead of NPM to install dependencies.

I do use yarn.

But I can see the peer dependency in @ant-design/icons-angular was updated to allow rxjs 7 in this commit: https://github.com/ant-design/ant-design-icons/commit/10fa524e557f91e10ea613128f505d35a9bdcfc5, so now I can get rid of the warning by running yarn upgrade.

[xcorpio]

@import "~ng-zorro-antd/divider/style/entry.less";
@import "~ng-zorro-antd/tree-view/style/entry.less";
^
Less resolver error:
'~ng-zorro-antd/tree-view/style/entry.less' wasn't found. Tried - /Users/who/Workspace/github/project/web-extension/angular/src/~ng-zorro-antd/tree-view/style/entry.less,npm://~ng-zorro-antd/tree-view/style/entry.less,~ng-zorro-antd/tree-view/style/entry.less

Webpack resolver error details:
resolve '~ng-zorro-antd/tree-view/style/entry.less' in '/Users/who/Workspace/github/project/web-extension/angular/src'
  Parsed request is a module
  using description file: /Users/who/Workspace/github/project/web-extension/package.json (relative path: ./angular/src)
    using description file: /Users/who/Workspace/github/project/web-extension/package.json (relative path: ./angular/src/~ng-zorro-antd/tree-view/style/entry.less)
      no extension
        /Users/who/Workspace/github/project/web-extension/angular/src/~ng-zorro-antd/tree-view/style/entry.less doesn't exist
      .less
        /Users/who/Workspace/github/project/web-extension/angular/src/~ng-zorro-antd/tree-view/style/entry.less.less doesn't exist
      .css
        /Users/who/Workspace/github/project/web-extension/angular/src/~ng-zorro-antd/tree-view/style/entry.less.css doesn't exist
      as directory
        /Users/who/Workspace/github/project/web-extension/angular/src/~ng-zorro-antd/tree-view/style/entry.less doesn't exist
    resolve as module
      looking for modules in /Users/who/Workspace/github/project/web-extension/angular
        /Users/who/Workspace/github/project/web-extension/angular/~ng-zorro-antd doesn't exist
      /Users/who/Workspace/github/project/web-extension/angular/src/node_modules doesn't exist or is not a directory
      /Users/who/Workspace/github/project/web-extension/angular/node_modules doesn't exist or is not a directory
      looking for modules in /Users/who/Workspace/github/project/web-extension/node_modules
        /Users/who/Workspace/github/project/web-extension/node_modules/~ng-zorro-antd doesn't exist
      looking for modules in /Users/who/Workspace/github/project/node_modules
        /Users/who/Workspace/github/project/node_modules/~ng-zorro-antd doesn't exist
      /Users/who/Workspace/github/node_modules doesn't exist or is not a directory
      /Users/who/Workspace/node_modules doesn't exist or is not a directory
      /Users/who/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

Webpack resolver error missing:
undefined

[achintha-weerasinghe]

@import "~ng-zorro-antd/divider/style/entry.less";
@import "~ng-zorro-antd/tree-view/style/entry.less";
^
Less resolver error:
'~ng-zorro-antd/tree-view/style/entry.less' wasn't found. Tried - /Users/who/Workspace/github/project/web-extension/angular/src/~ng-zorro-antd/tree-view/style/entry.less,npm://~ng-zorro-antd/tree-view/style/entry.less,~ng-zorro-antd/tree-view/style/entry.less

Webpack resolver error details:
resolve '~ng-zorro-antd/tree-view/style/entry.less' in '/Users/who/Workspace/github/project/web-extension/angular/src'
  Parsed request is a module
  using description file: /Users/who/Workspace/github/project/web-extension/package.json (relative path: ./angular/src)
    using description file: /Users/who/Workspace/github/project/web-extension/package.json (relative path: ./angular/src/~ng-zorro-antd/tree-view/style/entry.less)
      no extension
        /Users/who/Workspace/github/project/web-extension/angular/src/~ng-zorro-antd/tree-view/style/entry.less doesn't exist
      .less
        /Users/who/Workspace/github/project/web-extension/angular/src/~ng-zorro-antd/tree-view/style/entry.less.less doesn't exist
      .css
        /Users/who/Workspace/github/project/web-extension/angular/src/~ng-zorro-antd/tree-view/style/entry.less.css doesn't exist
      as directory
        /Users/who/Workspace/github/project/web-extension/angular/src/~ng-zorro-antd/tree-view/style/entry.less doesn't exist
    resolve as module
      looking for modules in /Users/who/Workspace/github/project/web-extension/angular
        /Users/who/Workspace/github/project/web-extension/angular/~ng-zorro-antd doesn't exist
      /Users/who/Workspace/github/project/web-extension/angular/src/node_modules doesn't exist or is not a directory
      /Users/who/Workspace/github/project/web-extension/angular/node_modules doesn't exist or is not a directory
      looking for modules in /Users/who/Workspace/github/project/web-extension/node_modules
        /Users/who/Workspace/github/project/web-extension/node_modules/~ng-zorro-antd doesn't exist
      looking for modules in /Users/who/Workspace/github/project/node_modules
        /Users/who/Workspace/github/project/node_modules/~ng-zorro-antd doesn't exist
      /Users/who/Workspace/github/node_modules doesn't exist or is not a directory
      /Users/who/Workspace/node_modules doesn't exist or is not a directory
      /Users/who/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

Webpack resolver error missing:
undefined

Had the same issue. Then I removed '~' like this. @import "ng-zorro-antd/button/style/entry.less";

Then I got another error saying @root-entry-name variable undefined. Any solutions for this? Temporary fix: add @root-entry-name: default in them.less file manually.

[cipchk]

Less 导入不再推荐使用 ~，而是尽可能使用 Webpack Resolver，因此应改成：

- @import "~ng-zorro-antd/divider/style/entry.less";
+ @import "ng-zorro-antd/divider/style/entry.less";

但，这又引发另一个问题，Angular Cli 在编译 Less 时并不包含 node_modules 路径列表，所以还需要在 angular.json 中加入：

"styles": ["src/styles.less"],
+ "stylePreprocessorOptions": {
+   "includePaths": [ "node_modules/" ]
+ },

[C3maLi]

I upgraded the ng-zorro library to v13, but I get an error while compiling the project, I intervened manually, is there any other solution? By the way, less-loader has removed the ~ feature.

The error I got is; @import './@{root-entry-name}.less'; ^ Variable @root-entry-name is undefined Error in node_modules\ng-zorro-antd\style\themes\index.less

[Devas9]

Less 导入不再推荐使用 ~，而是尽可能使用 Webpack Resolver，因此应改成：

- @import "~ng-zorro-antd/divider/style/entry.less";
+ @import "ng-zorro-antd/divider/style/entry.less";

但，这又引发另一个问题，Angular Cli 在编译 Less 时并不包含 node_modules 路径列表，所以还需要在 angular.json 中加入：

"styles": ["src/styles.less"],
+ "stylePreprocessorOptions": {
+   "includePaths": [ "node_modules/" ]
+ },

not work still error I got is; @import './@{root-entry-name}.less'; ^ Variable @root-entry-name is undefined Error in node_modules\ng-zorro-antd\style\themes\index.less

[akyrey]

With an Angular 13 project, using rxjs 7.5.x I get errors on all modal afterClose observables. Can we upgrade rxjs to latest version 7.5.x?

[achintha-weerasinghe]

Any updates on this issue?

@import './@{root-entry-name}.less';
^
Variable @root-entry-name is undefined
Error in node_modules\ng-zorro-antd\style\themes\index.less

[go-kenka]

Any updates on this issue?

@import './@{root-entry-name}.less';
^
Variable @root-entry-name is undefined
Error in node_modules\ng-zorro-antd\style\themes\index.less

you can add a variable to src/styles.less.

@root-entry-name: default;

[simplejason]

Any updates on this issue?

@import './@{root-entry-name}.less';
^
Variable @root-entry-name is undefined
Error in node_modules\ng-zorro-antd\style\themes\index.less

you can add a variable to src/styles.less.

@root-entry-name: default;

It's the right thing to do. When you want to use less file of any component instead of ng-zorro-antd.less, please add @root-entry-name: default; before your own style file since ant-design changes.

// styles.less
@root-entry-name: default; // add this to your styles file
@import "ng-zorro-antd/divider/style/entry.less";

[marct83]

I upgraded to v13.4.0 from 12.1.1 and I'm now seeing this error:

.fade-motion(fade, antFade);
^
Variable @ant-prefix is undefined
      Error in /home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/ng-zorro-antd/style/core/motion/fade.less (line 14, column 0)

./apps/toolbox/src/styles.less - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):



.fade-motion(fade, antFade);
^
Variable @ant-prefix is undefined
      Error in /home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/ng-zorro-antd/style/core/motion/fade.less (line 14, column 0)
    at tryRunOrWebpackError (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/Compilation.js:5049:12)
    at __webpack_require__ (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/Compilation.js:5006:18)
    at /home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/Compilation.js:5077:20
    at symbolIterator (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/neo-async/async.js:3485:9)
    at done (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/tapable/lib/Hook.js:18:14)
    at /home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/Compilation.js:4984:43
    at symbolIterator (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/neo-async/async.js:3482:9)
    at timesSync (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/neo-async/async.js:3463:5)
    at /home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/Compilation.js:4949:16
    at symbolIterator (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/neo-async/async.js:3463:5)
-- inner error --
Error: Module build failed (from ./node_modules/less-loader/dist/cjs.js):



.fade-motion(fade, antFade);
^
Variable @ant-prefix is undefined
      Error in /home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/ng-zorro-antd/style/core/motion/fade.less (line 14, column 0)
    at Object.<anonymous> (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].rules[0].oneOf[0].use[1]!/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[7].rules[0].oneOf[0].use[2]!/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[7].rules[1].use[0]!/home/tremm1/code/codebase/frontend/angular/toolbox/apps/toolbox/src/styles.less:1:7)
    at /home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval [as call] (eval at create (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/tapable/lib/Hook.js:14:14)
    at /home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/Compilation.js:5051:39
    at tryRunOrWebpackError (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/Compilation.js:5049:12)
    at __webpack_require__ (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/Compilation.js:5006:18)
    at /home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/Compilation.js:5077:20
    at symbolIterator (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/neo-async/async.js:3485:9)
    at done (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/tapable/lib/Hook.js:18:14)
    at /home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/webpack/lib/Compilation.js:4984:43
    at symbolIterator (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/neo-async/async.js:3482:9)
    at timesSync (/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/neo-async/async.js:2297:7)

Generated code for /home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].rules[0].oneOf[0].use[1]!/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[7].rules[0].oneOf[0].use[2]!/home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[7].rules[1].use[0]!/home/tremm1/code/codebase/frontend/angular/toolbox/apps/toolbox/src/styles.less
1 | throw new Error("Module build failed (from ./node_modules/less-loader/dist/cjs.js):\n\n\n\n.fade-motion(fade, antFade);\n^\nVariable @ant-prefix is undefined\n      Error in /home/tremm1/code/codebase/frontend/angular/toolbox/node_modules/ng-zorro-antd/style/core/motion/fade.less (line 14, column 0)");

[chandimacpgz]

Include as follows in .less files when Upgrading @root-entry-name: default; @import '../../../../../../../node_modules/ng-zorro-antd/components.less';