Renaming an Angular Component

Armno's avatar image
Published on August 22nd, 2019
By Armno P.

TL;DR - There is no easy way to rename an Angular component. There is no $ ng rename or $ ng move commands to rename components easily in the Angular CLI.

Some people have been asked for this as a CLI feature. See the issue angular-cli#900 on GitHub for the discussion.

Renaming a component is not a common task I would do often. However, it can be a bit cumbersome when I have to.

With help from VSCode, and some manual tasks, this is how I rename an Angular component. Maybe it’s not the best way but at least it works most of the time. And if you have a better solution, please let me know.

Note: This post is based on @angular/cli 8.2.2.

1. Use Rename Symbol command

With the cursor at the Component class, open Command Palette in VSCode with cmd+shift+p.

Select “Rename Symbol” command and change the class name.

VSCode will change the class name, and update all the references to this class in other files. This is safer than using global search and replace.

2. Save all files with Save All command

When VSCode changes the symbol name, it will open all updated files but will not save the changes to disk.

A quick way to save all files is also using the command palette.

cmd+shift+p and select “File: Save All”.

3. Rename folder and file names manually

Rename the component’s folder and files names to the new name. This is done manually from VSCode’s file explorer.

rename folder

rename files

VSCode will prompt to update import paths in other files. Select Yes.

rename files

4. Update paths in component decorator

Back to the component class, update paths in component decorator with new file names that were changed in the previous step.

5. Update component selector used in the templates

Since the component’s selector is changed, there will be a need to update component’s template tag in other templates too.

update template tag

6. Update component name in its spec file

Update component’s name in its spec file *.spec.ts to make the unit test report correct with updated name.

7. Verify

Check if everything is still working.

I like to run unit tests and run the production build commands just to see if there is any error reported.

If not, I assume renaming the component is done. 🤞

production build

Related posts