Changing the name of a component in Angular 12

Question

What is the proper way to rename a component in angular? Is there a command in the CLI to do so, or should I do the renaming manually?

Answer 1

Particularly, It seems that there is still no official support from the Angular CLI to rename components. The only solution right know is doing the following:

1. Rename all the files in the component folder

<new-name>.component.css, <new-name>.component.html, <new-name>.component.spec.ts, <new-name>.component.ts.

2. Rename the paths to templateUrl and styleUrls under the @Component Type Decorator in <new-name>.component.ts.
3. Rename the Class name in <new-name>.component.ts.
4. Modify the import of the component in and its declaration under the @NgModule decorator in the app.module.ts file.

---

Edit No.1:

Check the answer of the link below:

How to rename a component in Angular CLI?

There is also an open discussion on Github regarding the same topic:

Rename/Remove/Move components in Angular