How to rename a component in Angular CLI?

Question

Is there any shortcut to rename a component with the Angular CLI other than manually editing all the component files such as folder name, .css, .ts, spec.ts and app.module.ts?

Proton

Just rename the selector, if you want to change in html tag. If you want to change the class, u need to do it manually. – Len

Until they add in ng destroy you're not in luck... – Talich

You can monitor the feature in this thread: github.com/angular/angular-cli/issues/900 – Despiteful

search and replace, rename a couple of file/ directories.... job done – Alyce

This is the new thread, since the angular team decided to not include this within their cli. – Onerous

This post already has 200k views, thats how much people need this. Will they change their mind actually provide this feature for the love of fellow developer? – Lowell

Answer 1

No!

There is no command which will change the name of all files generated using the component create command. So created ts, html, css/scss, .spec.ts files need to be manually renamed/edited.

I am a frequent user of angular cli and I think this would be a nice-to-have command as some time we just create angular components and need to rename them. As this rename command is not there, deleting the created angular component, directive, etc and again running the command to create the component is really a pain.

Here is the discussion link to add this feature rename angular component

Heavyset

new WebStorm 2018.1.2 on words allow renaming of the component but never used it. will give a try later someday – Heavyset

@AniruddhaDas I think JetBrains had that for years in IntelliJIdea and in most of their IDEs including webstorm – Velarde

In VSCode for example, when there is something wrong (imported file that doesn't exist, non-existing component and so on), you can see error indications in the files explorer pane on the left. So, in my case I needed to rename a component, I just renamed its folder and inner file names, then I just followed all the error indications, modifying the name of this component accordingly. I guess this feature exists also in other modern IDEs these days... But to have an angular-cli command that does this automatically (much like "ng g c ...") would be great, though! Happy coding! :) – Oilstone

There is a discussion about this feature since 2016 about this feature: github.com/angular/angular-cli/issues/900 All requests for such a feature are linked to this thread and closed. @AniruddhaDas would you mind adding this to the answer? – Lewls

@Lewls added now. see if looks okey, feel free to edit as well. – Heavyset

There should be rather move command instead of rename, because move command could be used as rename command as well. – Harod

"nice-to-have" is an extreme understatement. It's 2023 and this feature is still missing. Sad we have to rely on VSCode for basic CLI functionality. Components are a core aspect of Angular and surely Google has the resources to handle this – Kislev

Answer 2

Yes!

Now there is.

There is an Extension for VS Code to do all of these steps for you. It's called Rename Angular Component.

I have hopes of porting it to WebStorm and a Schematic later.

Previously, it took at least three semi-automated steps in VS Code as a minimum. This Extension does all of them.

I realise this is promoting my own solution. But it is free, open source, and the complete answer. If it doesn't do everything you're looking for, you can post issues on the repo, and it will be improved.

Dangerfield

*Note: It does not rename the component name strings in .spec files. Check: github.com/tomwhite007/rename-angular-component/issues/34. – Floaty

It was able to rename component name strings in .spec files for me. Granted it's now 4/18/23. – Ostensive

Awesome, works like charm! Changed the component name and the html where it was called. – Cupellation

Works like Magic ! Thanks a lot – Unsegregated

Also note it does not rename routes so you'll probably want to manually update those to reflect the actual component name – Kislev

Nice but it doesn't update routes and imports of those components – Longitudinal

This solution works on my end. Thanks! – Lynx

Answer 3

Currently Angular CLI doesn't support the feature of renaming or refactoring code.

You can achieve such functionality with the help of some IDE.

Intellij, Eclipse, VSCode etc.. has default support the refactoring.

Nowadays VSCode is showing some uptrend,personally I'm a fan of this

Refactoring with VSCode

Determinig reference : - VS Code help you find all references of a variable by selecting variable and pressing shortcut SHIFT + F12. This works incredibly well with Type Script.

Renaming all instances of reference :- After finding all the references you can press F2 will open a popup and you can change the value and click enter this will update all the instances of reference.

Renaming files and imports You can rename a file and its import references with a plugin. More details can be found here

With above steps after renaming the variables and files you can achieve the angular component renaming.

Altigraph

You talk about references, files and imports, but what about renaming components? – Stress

@OrtomalaLokni angular-cli doesn't support renaming.The task of renaming can be achieved with these three steps. – Altigraph

Wow, love this extension! – Chekiang

Answer 4

Here is a checklist I use to rename a component:

1.Rename the component class (VSCode Rename Symbol will update all the references)

<Old Name>Component => <New Name>Component

2.Rename @Component selector along with references (use VSCode's Replace in Files):

app-<old-name> => app-<new-name>

Result:
@Component({
  selector: 'app-<old-name>' => 'app-<new-name>',
  ...
})

<app-{old-name}></app-{old-name}> => <app-{new-name}></app-{new-name}>

3.Rename component folder (when renaming folder in VSCode, it will update references in module and other components)

src\app\<module>\<old-name> => src\app\<module>\<new-name>

4.Rename component files (renaming manually will be the fastest, but you can also use a terminal to rename all at once)

<old-name>.component.* => <new-name>.component.*

Bash:
find . -name "<old-name>.component.*" -exec rename 's/\/<old-name>\.component/\/<new-name>.component/' '{}' +

PowerShell: 
Get-Item <old-name>.component.* | % { Rename-Item $_ <new-name>.component.$($_.Extension) }

Cmd:
rename <old-name>.component.* <new-name>.component.*

5.Replace file references in @Component (use VSCode's Replace in Files):

<old-name>.component => <new-name>.component

Result:
@Component({
  ...
  templateUrl: './<old-name>.component.html' => './<old-name>.component.html',
  styleUrls: ['./<old-name>.component.scss'] => ['./<new-name>.component.scss']
})

That should be sufficient

Maidel

thanks this is a great checklist. You'd think given there is a tedious but fairly straightforward manual process for this, you'd think somebody would've automated it and added it as an add-in to VS Code – Sicken

super handy...! – Unequal

Answer 5

While the OP asks for a CLI command, some of the answers focus on the IDEs. In this answer I just confirm, that the current WebStorm/IntelliJ does allow renaming the component. All that needs to be done is attempting to rename the class in the .ts file. You will be presented with:

and the rename will be performed in all relevant places.

Milagrosmilam

This was first reported in the current thread by @Aniruddha Das – Milagrosmilam

Note that this will not rename component selector appropriately – Viscoid

Answer 6

I personally have not found any command for the same. Just make a new component (renamed name) and copy paste the previous component's html, css, and ts. In ts obviously the class name would be replaced. Its the safest method but does take a little time.

Rondel

Answer 7

In WebStorm, you can right click → Refactor → Rename on the name of the component in the TypeScript file and it will change the name everywhere.

Micco

Answer 8

Just rename the files and components as you normally would think, then restart ng serve. Easy peasy.

Rename the files, paths, and references. The key is that you have to close your running server and start it again after everything is renamed.

Mccrary

Answer 9

There is no rename cli command yet. But the easiest way I have found to solve this problem is to generate a new component on the cli and copy the contents into the new component. Then delete the original component and you will have one error for each spot in your codebase where you need to rename to the new component name. Once all the errors are dealt with you are done! :)

PS: Also you will have to delete the import statements for the old component.

Ferrell

Answer 10

As the first answer indicated, currently there is no way to rename components so we're all just talking about work-arounds! This is what i do:

1. Create the new component you liked.

   ng generate component newName

2. Use Visual studio code editor or whatever other editor to then conveniently move code/pieces side by side!

3. In Linux, use grep & sed (find & replace) to find/replaces references.

   grep -ir "oldname"

   cd your folder

   sed -i 's/oldName/newName/g' *

Aiken

Answer 11

If you are using VS Code, you can rename the .ts, .html, .css/.scss, .spec.ts files and the IDE will take care of the imports for you. Therefore there will be no complaints from the files that import files from your component (such as app.module.ts). However, you will still have to rename the component name everywhere it is being used.

Isia

Answer 12

To change the component name in Angular, you need to follow these steps:

Open the file containing the component that you want to rename.

Locate the @Component decorator above the component class definition.

Change the selector property in the @Component decorator to the new name that you want to give to your component.

For example, if you want to change the component name from my-old-component to my-new-component, you would do the following:

@Component({
  selector: 'my-new-component',
  ...
})

export class MyOldComponent {
  ...
}

Save the file. That's it! You have successfully changed the component name in Angular.

Keep in mind that you may also need to update any references to the component in other parts of your application, such as in templates or in routing configurations.

Animato