Ng-Zorro-antd failing to compile after adding "ng add ng-zorro-antd"

Question

After adding ng-zorro-antd, project is not compiling and giving errors.

1. ng new PROJECT_NAME
2. cd PROJECT_NAME
3. ng add ng-zorro-antd

My configurations are: Angular CLI: 16.2.6 Node: 18.18.2 Package Manager: npm 9.8.1 OS: win32 x64

Angular: 16.2.10 animations, common, compiler, compiler-cli, core, forms platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1602.6 @angular-devkit/build-angular 16.2.6 @angular-devkit/core 16.2.6 @angular-devkit/schematics 16.2.6 @angular/cli 16.2.6 @schematics/angular 16.2.6 rxjs 7.8.1 typescript 5.1.6 zone.js 0.13.3

I created a new project and added ng add ng-zorro-antd. It is not compiling the project. Giving the following error at compile.

`Build at: 2023-10-19T18:34:17.236Z - Hash: d997af026ed5bf61 - Time: 38719ms

./src/theme.less - Error: Module build failed (from ./node_modules/less-loader/dist/cjs.js):`


`@import './themes/@{root-entry-name}.less'`;
`@import (inline) '../../node_modules/@angular/cdk/overlay-prebuilt.css';`
^
Less resolver error:
`'../../node_modules/@angular/cdk/overlay-prebuilt.css'` wasn't found. Tried - C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\node_modules\@angular\cdk\overlay-prebuilt.css,..\..\node_modules\@angular\cdk\overlay-prebuilt.css

Webpack resolver error details:
resolve `'../../node_modules/@angular/cdk/overlay-prebuilt.css'` in `'C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\ng-zorro-antd\style'`
  using description file: C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\ng-zorro-antd\package.json (relative path: ./style)
    using description file: C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\package.json (relative path: ./node_modules/node_modules/@angular/cdk/overlay-prebuilt.css)
      no extension
        C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\node_modules\@angular\cdk\overlay-prebuilt.css doesn't exist
      .less
        C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\node_modules\@angular\cdk\overlay-prebuilt.css.less doesn't exist
      .css
        C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\node_modules\@angular\cdk\overlay-prebuilt.css.css doesn't exist
      as directory
        C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\node_modules\@angular\cdk\overlay-prebuilt.css doesn't exist

Webpack resolver error missing:
undefined


      Error in C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\ng-zorro-antd\style\patch.less (line 2, column 0)

./src/theme.less?ngGlobalStyle - 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):


`@import './themes/@{root-entry-name}.less';`
`@import (inline) '../../node_modules/@angular/cdk/overlay-prebuilt.css';`
^
Less resolver error:
`'../../node_modules/@angular/cdk/overlay-prebuilt.css'` wasn't found. Tried - C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\node_modules\@angular\cdk\overlay-prebuilt.css,..\..\node_modules\@angular\cdk\overlay-prebuilt.css

Webpack resolver error details:
resolve `'../../node_modules/@angular/cdk/overlay-prebuilt.css'` in `'C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\ng-zorro-antd\style'`
  using description file: C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\ng-zorro-antd\package.json (relative path: ./style)
    using description file: C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\package.json (relative path: ./node_modules/node_modules/@angular/cdk/overlay-prebuilt.css)
      no extension
        C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\node_modules\@angular\cdk\overlay-prebuilt.css doesn't exist
      .less
        C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\node_modules\@angular\cdk\overlay-prebuilt.css.less doesn't exist
      .css
        C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\node_modules\@angular\cdk\overlay-prebuilt.css.css doesn't exist
      as directory
        C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\node_modules\@angular\cdk\overlay-prebuilt.css doesn't exist

Webpack resolver error missing:
undefined


      Error in C:\Users\sunil\OneDrive\Documents\Angular Projects\angular6\node_modules\ng-zorro-antd\style\patch.less (line 2, column 0)



** Angular Live Development Server is listening on localhost:4400, open your browser on http://localhost:4400/ **


× Failed to compile.

Answer 1

This appears to be a bug in ng-zorro-antd 16.2.1 which, according to this Github discussion, will soon be fixed in version 16.2.2.

You can either wait for it to be fixed, or downgrade ng-zorro-antd (15.1.0) and angular (15.2.10).