'Angular component css not added to <head>
I have an Angular 11 component -- app-progress that includes some css. It's in a separate npm package. Testing it within its own project shows the correct styles are applied.
In another Angular 11 app I'm importing that app-progress component. I've checked the compiled fesm2015 js file and it definitely includes the css:
styles: ["[_nghost-%COMP%]{background-color:#d4d4d4;border-radius:0}.narrow[_nghost-%COMP%]{height:8px!important}"]
However when I add the to the HTML it renders the correct HTML but the CSS is not added to the <head> section and the <app-progress> doesn't have an _nghost... attribute added to it.
Any ideas what might be happening?
Solution 1:[1]
It may happen when @angular-devkit/build-angular version doesn't match the rest of the angular packages.
In my case my @angular-devkit/build-angular package was at v13.2.5 whereas all my other packages were mostly 13.1.1.
Once I updated all my angular packages to 13.2.6, no more style issues.
I also tried to replicate the issue after the update, but no luck...
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | ZrSiO4 |