Angular Element Single Bundle Styles Not Being Applied

[tuckerjt07]

I am building an angular element and then using it as a web component via the following command: ng build --prod --extra-webpack-config webpack.partial.js --stats-json --outputHashing=none --single-bundle=true

However the styles are not being applied in the application it is running in. When I inspect the js file that is generated I can see that the styles are being bundled. I'm sure I'm missing something simple but I'm not sure what it is.

[myrddraall]

if you experiancing the same thing i am:

component styles are included but styles.css/scss is not then

i found a temporary fix:

node_modules\ngx-build-plus\src\utils\index.js

change line 50 (v 9.0.2) from

if (options.singleBundle && (options.bundleStyles !== false || options.keepStyles) && config.entry && config.entry['styles']) {

to

if (options.singleBundle && (options.bundleStyles === false && options.keepStyles === false) && config.entry && config.entry['styles']) {

[Gorgho]

Same error here, styles are being bundle but not being applied.

[MiyaMiyu]

I have the same problem too. Does it has solutions without using ngx-build-plus?

[matdv]

This is still an issue for webcomponents. I tried to move the global styles.scss to the component styles of the webcomponent, but it caused issues with tailwind. I ended up creating a style loader service that adds the compiled styles.css to the head of the document at runtime, so that the webcomponent loads the style itself and only one js file has be included in the parent.

export class StyleLoaderService {
  loadStyle(cssUrl: string, document: Document): void {
    console.log(`apply styles from ${cssUrl}...`);
    const head = document.getElementsByTagName('head')[0];
    const style = document.createElement('link');
    style.rel = 'stylesheet';
    style.href = `${cssUrl}`;
    head.appendChild(style);
  }
}

However, the styles are not scoped for the webcomponent. For that, the component styles with shadowDOM would be optimal, but it causes trouble with style libraries that append styles to the html (you have to include them manually in the component styles) and also tailwind doesn't update html-class changes on serve...