Warning: 1 rules skipped due to selector errors: legend + * -> Cannot read property 'type' of undefined

Question

I have this warning since i've upgraded from Angular v8 to Angular v13 and bootstrap from v5.0 to v5.2 , everytime i do ctrl+s the compilation si so slow and this warning appears again
this is the dependecies in my package.json file

  "dependencies": {
    "@angular/animations": "~13.3.11",
    "@angular/common": "~13.3.11",
    "@angular/compiler": "~13.3.11",
    "@angular/core": "~13.3.11",
    "@angular/forms": "~13.3.11",
    "@angular/platform-browser": "~13.3.11",
    "@angular/platform-browser-dynamic": "~13.3.11",
    "@angular/router": "~13.3.11",
    "@auth0/angular-jwt": "^5.0.2",
    "bootstrap": "^5.2.0-beta1",
    "bootstrap-icons": "^1.8.3",
    "express": "^4.18.1",
    "feather": "0.0.6",
    "feather-icons": "^4.29.0",
    "http-proxy-middleware": "^2.0.6",
    "path": "^0.12.7",
    "rxjs": "~7.5.5",
    "tslib": "^1.10.0",
    "typescript": "~4.6.4",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.7",
    "@angular/cli": "~13.3.7",
    "@angular/compiler-cli": "~13.3.11",
    "@angular/language-service": "~13.3.11",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "http-proxy-middleware": "^2.0.6",
    "install": "^0.13.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~6.3.20",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "npm": "^8.12.1",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0"
  },
  "resolutions": {
    "autoprefixer": "10.4.5"
  }

Answer 1

I had the same issue, but I was able to eliminate this warning by adding the following configuration properties into the "production" build settings in the "angular.json" file:

            "optimization": {
              "scripts": true,
              "styles": {
                "minify": true,
                "inlineCritical": false
                },
              "fonts": true
            },
            "outputHashing": "all",
            "sourceMap": false,
            "namedChunks": false,
            "aot": true,
            "extractLicenses": true,
            "vendorChunk": false,
            "buildOptimizer": true

(Note: You might need only some of them in your project to solve your problem)

Answer 2

CSR: Client-side Rendering

In this mode, open angualr.json and add the following section:

NOTE: Path is ( projects > YOUR_PROJECT_NAME > architect > build > configurations > production )

"optimization": {
    "scripts": true,
    "styles": {
        "minify": true,
        "inlineCritical": false
    }
}

SSR: Server-side Rendering (Angular Universal)

Adding optimization section in angualr.json file does not work in SSR mode(Universal). That's why, open the server.ts file(in the root of your project) and modify ngExpressEngine like the following:

ngExpressEngine({
    bootstrap: AppServerModule,
    inlineCriticalCss: false,
})

UPDATED

In Angular 17+, open server.ts and add inlineCriticalCss: false to render function

  server.get('*', (req, res, next) => {
    const { protocol, originalUrl, baseUrl, headers } = req;

    commonEngine
      .render({
        bootstrap: AppServerModule,
        inlineCriticalCss: false, <---- this line.
        documentFilePath: indexHtml,
        url: `${protocol}://${headers.host}${originalUrl}`,
        publicPath: browserDistFolder,
        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
      })
      .then((html) => res.send(html))
      .catch((err) => next(err));
  });