Warnings when compiling the app

[sawa-ko]

Reproduction link

No.

Steps to reproduce

1. Install Ant Design.
2. Compile the application.

What is expected?

An application compilation without any warnings.

What is actually happening?

I receive some warnings about skipped rules in some Ant Design components.

Environment	Info
ng-zorro-antd	12.0.1
Browser	Microsoft Edge Versión 95.0.1020.40

---

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 12.2.12
Node: 16.11.0 (Unsupported)
Package Manager: yarn 3.0.2
OS: win32 x64

Angular: 12.2.12
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.12
@angular-devkit/build-angular   12.2.12
@angular-devkit/core            12.2.12
@angular-devkit/schematics      12.2.12
@angular/flex-layout            12.0.0-beta.35
@schematics/angular             12.2.12
rxjs                            6.6.7
typescript                      4.3.5

PS app> yarn build
✔ Browser application bundle generation complete.
✔ Localized bundle generation complete.
✔ Copying assets complete.
⠋ Generating index html...4 rules skipped due to selector errors:
  .ant-form-item-has-warning .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled)-focused -> Missing closing parenthesis in :not (.ant-form-item-has-warning .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled)-focused)
  .ant-form-item-has-warning .ant-input:not(.ant-input-disabled)-focused -> Missing closing parenthesis in :not (.ant-form-item-has-warning .ant-input:not(.ant-input-disabled)-focused)
  .ant-form-item-has-error .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled)-focused -> Missing closing parenthesis in :not (.ant-form-item-has-error .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled)-focused)
  .ant-form-item-has-error .ant-input:not(.ant-input-disabled)-focused -> Missing closing parenthesis in :not (.ant-form-item-has-error .ant-input:not(.ant-input-disabled)-focused)
✔ Index html generation complete.
```<!-- generated by ng-zorro-issue-helper. DO NOT REMOVE -->

[simplejason]

I try to use ng build to reproduce but no warning about css shown, please make sure you have configured ng-zorro-antd like the official doc

[tsvetan-ganev]

@simplejason, I also encounter this issue. It started occurring when I upgraded Angular to 12.2.12 and Node.js to v16.13.0. I haven't changed any ng-zorro related code or configurations.

[sawa-ko]

@simplejason, I also encounter this issue. It started occurring when I upgraded Angular to 12.2.12 and Node.js to v16.13.0. I haven't changed any ng-zorro related code or configurations.

I'm using the same as well, and I'm testing with a blank Angular app with ng-zorro installed.

[studyvue]

form 里面的 index.css 样式发布得有问题啊，我拉最新的 ng-zorro-antd npm run build:lib 生成之后的不是这样

[russelomua]

I have a same problem after upgrading Angular 11 to Angular 12 with ng-zorro-antd upgrading. To debug this problem i create a new blank project by Getting Started manual and start to compare a configurations and dependecies. Few minutes later i had seen a difference in angular.json files. Manual merge of these two configurations solve this problem/

example of changes:

Merging of angular.json is project-specific and i can't help you to made this in your project

[rennyong]

@simplejason I have tested with multiple version of @angular/cli@12.x.x The latest version that will not have the error mentioned is @angular/cli@12.1.4, anything above that will have the error when ng build. @kaname-png please try with @angular/cli@12.1.4, until the issues are fixed.