how can i combine all <style> tag added in head tag in angular app?

Question

i have seperate component in my angular app, the version ofangular is 16 so because of view capsulation emulated , angular add tag for each component in head tag, this is a problem for SEO how can i fix this issue and add all style in one css file?

i try to make a component folder in my project and add each component style in this folder then add import all these component styles in one global style file

Answer 1

You will get those multiple style elements when you have component scoped styling.

If you want to have a single style element, then you'll have to rely a global styling (ie no more stylesUrl/styles in your component.

That beeing said, there is no strong evidence that multiple style elements will negatively impact SEO.