ng-bootstrap: Rules skipped due to selector errors: legend+* -> Cannot read property 'type' of undefined

Had the same issue. Managed to solve it by replacing "optimization": true in angular.json with

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

As suggested in https://mdbootstrap.com/support/angular/angular-12-production-build-warning-mdb4-12/

These additional properties (added to the “production” section in the “angular.json” file) solved my problem, and the warning message disappeared.

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

I get even two messages:

Warning: 2 rules skipped due to selector errors:
  legend+* -> Cannot read properties of undefined (reading 'type')
  legend + * -> Cannot read properties of undefined (reading 'type')

Disabling inlineCritical in angular.json as others suggested helped me get rid of this warning from ng build output. However, the warning was still present in npm run dev:ssr output, as I am using Angular Universal. I was able to get rid of this one as well, by setting inlineCriticalCss to false in ngExpressEngine options (server.ts file).

  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
    inlineCriticalCss: false, // <- added
  }));

Edit: Regarding inlineCritical there is also:

• Angular Security - Disable Inline Critical CSS
• Angular 12 CSS optimization inline event handler with Content Security Policy
• inlineCriticalCss is slow

The option was introduced with Angular 12. Normally, I am against disabling features to get rid of a warning, but in this case it seems like a reasonable solution.

I get even two messages:

Warning: 2 rules skipped due to selector errors:
  legend+* -> Cannot read properties of undefined (reading 'type')
  legend + * -> Cannot read properties of undefined (reading 'type')

It’s because you installed bootstrap and ng-bootstrap

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

it’s working, you need to add it to production in angular.json

I had the same issue, which solved by adding below code to the production section in angular.json file.

“optimization”: { “scripts”: true, “styles”: { “minify”: true, “inlineCritical”: false }

Brand new Angular 17.1.2 project getting this error on a production build.

▲ [WARNING] 2 rules skipped due to selector errors:
  .form-floating>~label -> Did not expect successive traversals.
  .form-floating>~label -> Did not expect successive traversals.

I’m having the same issue after upgrading to angular 17 and using the new commonengine with SSR

Is there a solution ?

@kmlbdh you are right. Thanks for the clarification. The production configuration of my angular.json looks like this

....
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "xxx/src/environments/environment.ts",
                  "with": "xxx/src/environments/environment.prod.ts"
                }
              ],
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": true,
                  "inlineCritical": false
                }
              },
....

@enirtak, no this is not a solution, it is a poor workaround where you disable optimization.

The proper solution is to upgrade to Angular 16.1.0, which includes the proper fix.

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

This is the solution in October 2023 with Angular 16 and Bootstrap 5.

Had the same issue. Managed to solve it by replacing "optimization": true in angular.json with

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

As suggested in https://mdbootstrap.com/support/angular/angular-12-production-build-warning-mdb4-12/

I continue having the same warning 😦

The same warning was received upon creating a new empty angular 13.3.3 app with bootstrap 5.3.1.

Angular CLI: 13.3.3
Node: 16.14.2
Package Manager: npm 8.6.0
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.3
@angular-devkit/build-angular   13.3.3
@angular-devkit/core            13.3.3
@angular-devkit/schematics      13.3.3
@schematics/angular             13.3.3
rxjs                            7.5.5
typescript                      4.6.3

── @angular-devkit/build-angular@13.3.3
├── @angular/animations@13.3.3
├── @angular/cli@13.3.3
├── @angular/common@13.3.3
├── @angular/compiler-cli@13.3.3
├── @angular/compiler@13.3.3
├── @angular/core@13.3.3
├── @angular/forms@13.3.3
├── @angular/platform-browser-dynamic@13.3.3
├── @angular/platform-browser@13.3.3
├── @angular/router@13.3.3
├── @popperjs/core@2.11.5
├── @types/jasmine@4.0.2
├── @types/node@17.0.24
├── bootstrap@5.1.3
├── jasmine-core@4.1.0
├── karma-chrome-launcher@3.1.1
├── karma-coverage@2.2.0
├── karma-jasmine-html-reporter@1.7.0
├── karma-jasmine@5.0.0
├── karma@6.3.18
├── rxjs@7.5.5
├── tslib@2.3.1
├── typescript@4.6.3
└── zone.js@0.11.5

I don’t think disabling optimisation is a great idea, instead you can override the version of css-select (a dependency of critters, which is causing the issue) with npm, add the below snippet to package.json and do npm install and you should find it’ll override the dependency for now.

(If you’re using yarn, it’s similar. Refer to @PowerKiKi’s comment here: https://github.com/GoogleChromeLabs/critters/pull/117#issuecomment-1324699091)

Remove this once a proper fix is out.

(Note that I’ve got Angular 15.0.1, Typescript 4.8.4 and Bootstrap 5.2.3 installed, I’m not using ng-angular but this fix should still work)

Proof:

package.json:

{
   ...
   "overrides": {
       "css-select": "^4.2.1"
       // These may be optional, check the versions present in your package-lock.json, if they're already this version or later no need to include
       "css-what": "^5.1.0"
       "domhandler": "^4.3.1"
   }
   ...
}

Similar issue found on Angular 14. The workaround removed the selector error, but I’m still seeing some other warnings.

Package.json below:

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
    "bootstrap": "^5.1.3",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.1",
    "@angular/cli": "~14.0.1",
    "@angular/compiler-cli": "^14.0.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.7.2"
  }
}

hi @hhubik ,@kmlbdh i am used angular SSR for my project, that running time , i faced this error ‘1 rules skipped due to selector errors: legend+* -> Cannot read property ‘type’ of undefined’

i tried using this code in angualr.json , build object–>configurations–>production section that is not worked for me 😦 if any other place in angular .json to add this code???

“optimization”: { “scripts”: true, “styles”: { “minify”: true, “inlineCritical”: false }, “fonts”: true },

  "minify": true,
    "inlineCritical": false
  }

not worked for me

same error for my intial project –>

I also have problems with this… and didn’t found a good solution yet!

I have an Angular app with SSR pre-rendenring.

So I disabled inline Css as suggested many times here on my express node server :

  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
    inlineCriticalCss: true 
  }));

Great, the warnings disappeared!

However, I started having “flickering” on my app loading on the browser…

• The first call do SSR on server side and the browser get the response with a pre-rendered page (instead of “empty” one like without SSR)
• but the styles are not here, so the browser displays first this “ugly pre-rendered page without styles”
• then styles are downloaded and applied
• this causes ugly flickering…

This thread talks about this flickering problem :

• https://github.com/angular/universal/issues/974

Has been fixed by this one :

• https://github.com/angular/universal/pull/1880
• that intriduced inlineCriticalCss: true to fix it!! 😃

So if I put back the inlineCssCritical to true on server :

• pre-rendered first request sends a page with styles inside, and displays “good” on the browser since the beinning
• but SSR is slower, and my first request seems to take more time on the server because of the styles inlining on server side
• probably related to this : https://github.com/angular/universal/issues/2106

So it seems I have to choose between :

• “beautiful” first rendering on browser (from pre-rendered first request on server side), BUT with bootstrap warnings on the server log for each SSR + slower pre-rendering
• “ugly” first rendering + flickering, BUT no error in logs and faster pre-rendering

For now I chose better rendering for the users, because flickering is really a bad user experience…

But I think I miss something, like I can have a “correct” first rendering on the browser for my pre-rendered HTML while having decent rendering time and no errors on logs ?

If you have some ideas, please tell me !

Thanks

It is not an ng-bootstrap issue as it was discussed previously. I didn’t want to close it until it gets resolved with dependencies.

This should have been fixed in critters@0.0.17 → https://github.com/GoogleChromeLabs/critters/issues/103

At least I don’t see this issue anymore using critters >= 0.0.17 and running ng-bootstrap’s SSR tests.

So you can either resolve critters to this version or use @angular-devkit/build-angular@16.1.0 where they’ve bumped critters 0.0.16 → 0.0.18:

yarn info @angular-devkit/build-angular@16.0.6 | grep critters
critters: '0.0.16',

yarn info @angular-devkit/build-angular@16.1.0 | grep critters
critters: '0.0.18',

These additional properties (added to the “production” section in the “angular.json” file) solved my problem, and the warning message disappeared.

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

This is the solution in May of 2023 with Angular 16 and Bootstrap 5.

Disabling inlineCritical in angular.json as others suggested helped me get rid of this warning from ng build output. However, the warning was still present in npm run dev:ssr output, as I am using Angular Universal. I was able to get rid of this one as well, by setting inlineCriticalCss to false in ngExpressEngine options (server.ts file).

  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
    inlineCriticalCss: false, // <- added
  }));

Edit: Regarding inlineCritical there is also:

• Angular Security - Disable Inline Critical CSS
• Angular 12 CSS optimization inline event handler with Content Security Policy
• inlineCriticalCss is slow

The option was introduced with Angular 12. Normally, I am against disabling features to get rid of a warning, but in this case it seems like a reasonable solution.

That has worked for me as well. I use Angular 15.2.0 with the latest gratest libraries for SSR as well and Bootstrap 5.2.3

I’m having the same issue, but I don’t think it’s a bug in ng-bootstrap or bootstrap. This particular warning (when not disabling it setting inlineCritical to false) is thrown when combining an adjacent sibling with a universal selector. In Bootstrap’s case this used for clearing elements in the Legend element, but this warning will be shown whenever you use the combination. However i think it is perfectly valid css.

E.g. having this CSS in your an Angular app will thrown the same warning:

.floating + * {
    clear: left;
}

These additional properties (added to the “production” section in the “angular.json” file) solved my problem, and the warning message disappeared.

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

Worked for me optimization [https://angular.io/guide/workspace-config#optimization-configuration]

Integration Angular Universal to my project for SSR. But I have this issue even after I corrected the suggested correction in Anguşar.json.

Same for me

Integration Angular Universal to my project for SSR. But I have this issue even after I corrected the suggested correction in Anguşar.json.

The root issue is not in this package, but in critters, over there: https://github.com/GoogleChromeLabs/critters/issues/103

@gravityctrl can you please close this issue and, if needed, keep the conversation in the other thread please ?

@ImmuneGit can you share your dependencies?

Thanks

Angular CLI: 14.1.0
Node: 18.7.0 (Unsupported)
Package Manager: npm 8.15.1 
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1401.0
@angular-devkit/build-angular   14.1.0
@angular-devkit/core            14.1.0
@angular-devkit/schematics      14.1.0
@schematics/angular             14.1.0
rxjs                            7.5.6
typescript                      4.7.4
    
"dependencies": {
    "@angular/animations": "^14.1.0",
    "@angular/common": "^14.1.0",
    "@angular/compiler": "^14.1.0",
    "@angular/core": "^14.1.0",
    "@angular/forms": "^14.1.0",
    "@angular/platform-browser": "^14.1.0",
    "@angular/platform-browser-dynamic": "^14.1.0",
    "@angular/router": "^14.1.0",
    "@fortawesome/angular-fontawesome": "^0.11.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "^6.1.2",
    "@ng-bootstrap/ng-bootstrap": "^13.0.0",
    "@ngxs/storage-plugin": "^3.7.4",
    "@ngxs/store": "^3.7.4",
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.2.0",
    "jwt-decode": "^3.1.2",
    "rxjs": "~7.5.6",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.7"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.1.0",
    "@angular/cli": "^14.1.0",
    "@angular/compiler-cli": "^14.1.0",
    "@ngxs/devtools-plugin": "^3.7.4",
    "@types/jasmine": "~4.0.3",
    "@types/node": "^18.6.3",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.4"
  }

Is there any news on how to solve this? I’m finding it difficult to develop my frontend app with ng serve when over half my css won’t load, and I can’t upgrade from Angular 11 since this issue pops up as soon as I upgrade to v12.

@stevewhitmore I only use the grid from from Bootstrap 5 (5.1.3) that I import in styles.css like this

@import '../../../node_modules/bootstrap/scss/bootstrap-reboot';
@import '../../../node_modules/bootstrap/scss/bootstrap-grid';

This seems to work fine since I have added the fix in the angular.json file.

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

it didn’t work for me too