Angular build - Unmatched selector: %

Question

When I run npm run build which executes ng build -c production build will be completed as expected. But command prompt will be filled with this warning:

Warning: 303 rules skipped due to selector errors:
  0% -> Unmatched selector: %
  20% -> Unmatched selector: %
  53% -> Unmatched selector: %
  40% -> Unmatched selector: %
  43% -> Unmatched selector: %
  70% -> Unmatched selector: %
  80% -> Unmatched selector: %
  90% -> Unmatched selector: %
...

How to solve this warning?

package.json:

{
  "name": "wepod-clients",
  "version": "3.2.3",
  "scripts": {
    "ng": "ng",
    "start": "node patch.js && ng serve",
    "serve-auth": "ng run wepod-app:serve-auth-standalone:production",
    "build": "node patch.js && node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng run wepod-app:app-shell:production && ng run wepod-app:auth-standalone:production",
    "server": "npm run build && http-server -p 9090 -c-1 dist",
    "test": "ng test",
    "lint": "ng lint --fix",
    "e2e": "ng e2e",
    "postinstall": "node patch.js && ngcc",
    "postbuild": "node post-build.js",
    "prepare": "husky install",
    "build-latest": "git pull origin production && npm run build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.0.0",
    "@angular/cdk": "^13.0.0",
    "@angular/cli": "^13.0.1",
    "@angular/common": "^13.0.0",
    "@angular/compiler": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/forms": "^13.0.0",
    "@angular/localize": "^13.0.0",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/platform-server": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@angular/service-worker": "^13.0.0",
    "@types/video.js": "^7.3.27",
    "animate.css": "^4.1.1",
    "assert": "^2.0.0",
    "bowser": "^2.11.0",
    "buffer": "^6.0.3",
    "bundle-loader": "^0.5.6",
    "compare-version": "^0.1.2",
    "constants-browserify": "^1.0.0",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^4.1.1",
    "d3": "^6.5.0",
    "hammerjs": "^2.0.8",
    "https-browserify": "^1.0.0",
    "jalali-moment": "^3.3.10",
    "lottie-web": "^5.7.13",
    "lzutf8": "^0.6.0",
    "net": "^1.0.2",
    "ng-gallery": "^5.1.1",
    "ng2-jalali-date-picker": "^2.4.2",
    "ngx-device-detector": "^1.5.2",
    "ngx-doughnut-chart": "0.0.4",
    "ngx-infinite-scroll": "^8.0.2",
    "ngx-lottie": "^7.0.4",
    "ngx-owl-carousel-o": "^3.1.1",
    "ngx-skeleton-loader": "^2.10.1",
    "ngx-toastr": "^12.1.0",
    "os-browserify": "^0.3.0",
    "podchat-browser": "^10.14.13",
    "rxjs": "^6.6.7",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "tls": "0.0.1",
    "ts-ebml": "^2.0.2",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "video.js": "^7.15.4",
    "videojs-record": "^4.5.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.0.1",
    "@angular-devkit/core": "^13.0.1",
    "@angular/compiler-cli": "^13.0.0",
    "@angular/language-service": "^13.0.0",
    "@egjs/hammerjs": "^2.0.17",
    "@types/hammerjs": "^2.0.40",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.36",
    "codelyzer": "^6.0.0",
    "colors": "^1.4.0",
    "git-tag-version": "^1.3.1",
    "gulp": "^4.0.2",
    "gulp-gzip": "^1.4.2",
    "http-server": "^14.0.0",
    "husky": "^7.0.4",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.7",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "^7.0.0",
    "ts-node": "^8.10.2",
    "tslint": "^6.1.3",
    "typescript": "4.4.4",
    "zip-dir": "^2.0.0"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  }
}

Answer 1

Nothing from mentioned helped me. The only way was do delete all @-moz-keyframes blocks

Answer 2

I had 14 of these errors showing on build. Angular 18.

Searched the interweb and not much. So I ran a match on the %s that seemed arbitrary to me and it corresponded to Keyframe declarations in my scss file.

Specifically keyframes that targeted @-moz-keyframes.

Not sure if this vendor prefix has been deprecated, removed them and the build runs clean. Clearly Angular is ignoring them now.

Answer 3

You can try to figure out which build configuration property causes the issue. I figured out that for me, it is the optimization flag when set to true. Angular allows to configure optimization also through an object, not only through a boolean flag - with this, you can dig deeper which of these steps cause the problem. You find the documentation here: https://angular.dev/reference/configs/workspace-config#optimization-configuration

For me, it's the inlineCritical flag causing the build output. During investigation, I found out that one of the library stylesheets added to the styles array referenced within the angular.json causes the issue. Unfortunately, I haven't found an option to exclude or specify the investigated files for this flag, so I decided to set it to false for now.

Answer 4

After searching I found out that angular is removing support for IE 11.

There is 2 ways to confront that matter:

1. Remove support for IE 11 as tstdplt mentioned from .browserslistrc or browserslist:

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

• not is essential.

2. Add support by compiling your project to lower ECMAScript by polyfills. You can follow the steps mentioned in this article.

Answer 5

can you try to put the following into your ".browserlistrc" file. The file is located in the root directory of your project.

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
IE 11

This once helped me to fix the error.