Selector errors

[captain01010101]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Whenever bootstrap.min.css is included in the angular build, we get a "Selector Error" during server side rendering (with angular universal). The error message is: "Cannot read properties of undefined (reading 'type')"

"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/platform-server": "^14.0.0",
"@angular/router": "^14.0.0",
"@nguniversal/express-engine": "^14.2.0",
"bootstrap": "^5.2.0",
"express": "^4.15.2",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},

Angular CLI: 14.2.1
Node: 16.15.0
Package Manager: npm 8.5.5
OS: win32 x64

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

Package Version

@angular-devkit/architect 0.1402.1
@angular-devkit/build-angular 14.2.1
@angular-devkit/core 14.2.1
@angular-devkit/schematics 14.2.1
@angular/cli 14.2.1
@nguniversal/builders 14.2.0
@nguniversal/express-engine 14.2.0
@schematics/angular 14.2.1
rxjs 7.5.6
typescript 4.7.4

Reduced test cases

I was able to recreate the error by creating a new angular universal project and including the bootstrap library.

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.2.0

[julien-deramond]

Thanks for opening this issue @lightbulb110. Do you see the same thing with the 5.2.1 of Bootstrap as well?

Could be a duplicate of #36136.

[captain01010101]

Yes, same issue with 5.2.1

[julien-deramond]

$ npm i -g @angular/cli@14
$ ng new my-app
? Would you like to add Angular routing? Yes
? Which stylesheet format you would like to use? SCSS
$ cd my-app
$ ng add @nguniversal/express-engine
$ npm i bootstrap

In angular.json added at the good place

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.js"
]

Modified the app.component.html to display our Accordion example.
Then npm run dev:ssr.

The page is displayed correctly and the accordion works as expected.
However, when loading the page I have the following message:

Compiled successfully.
** Angular Universal Live Development Server is listening on http://localhost:4200, open your browser on http://localhost:4200 **
1 rules skipped due to selector errors:
  legend + * -> Cannot read properties of undefined (reading 'type')

@lightbulb110 Do you confirm the steps, the configuration and the error. Same issue as yours?

[captain01010101]

Right on, you got it.

[captain01010101]

@XhmikosR Is this fixed?

[julien-deramond]

Just some information regarding this issue for the one searching into our repository.
The issue doesn't come from the CSS selector used by Bootstrap but rather from Angular Universal itself (and probably because of the critters package it has as a dependency).

Some modifications in angular.json seem to work for some people in ng-bootstrap/ng-bootstrap#4306 but the real issue should be tackled by Angular Universal.

So nothing to fix on our side.

[XhmikosR]

Yeah, see @julien-deramond's answer. I too would like this to be sorted since I'm hitting this myself, but it's not an issue we can fix ourselves.

[XhmikosR]

For reference, this is the root cause: GoogleChromeLabs/critters#103