Using styleUrls instead of styleUrl in component Angular 17

Question

How to set styleUrls instead of styleUrl in component by command ng generate component? In Angular 14, styleUrls property in the component decorator was set automatically after component generating. In Angular 17, is styleUrl. How to change it?

I can manually edit the component file after generating it to change styleUrl to styleUrls, but it's not okay.

Answer 1

Angular 17 has introduced styleUrl as a convenience for cases where there's only one stylesheet. If you need to use multiple stylesheets and prefer the styleUrls property, as of now, there is no built-in command option in Angular CLI to automatically set styleUrls instead of styleUrl during component generation.

You either have to manually edit the component files or consider creating a custom schematic.

Source code

Answer 2

You an use the argument --inline-style of ng generate component

So full command wil be

ng g c test --inline-style

---

--inline-style (Type: boolean)

Aliases: -s

Include styles inline in the root component.ts file. Only CSS styles can be included inline. Default is false, meaning that an external styles file is created and referenced in the root component.ts file.