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

User · Answer

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

User · Answer

see angular-rename  install  npm install -g angular-rename   use       angular-rename OldComponentName NewComponentName

User · Answer

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

User · Answer

Here is a checklist I use to rename a component  1 Rename the component class  VSCode Rename Symbool will update all the references   lt Old Name gt Component   gt   lt New Name gt Component  2 Rename  Component selector along with references  use VSCode s Replace in Files   app- lt old-name gt    gt  app- lt new-name gt   Result   Component     selector   app- lt old-name gt     gt   app- lt new-name gt               lt app- old-name  gt  lt  app- old-name  gt    gt   lt app- new-name  gt  lt  app- new-name  gt   3 Rename component folder  when renaming folder in VSCode  it will update references in module and other components  src app  lt module gt   lt old-name gt    gt  src app  lt module gt   lt new-name gt   4 Rename component files  renaming manually will be the fastest  but you can also use a terminal to rename all at once   lt old-name gt  compoonent     gt   lt new-name gt  compoonent    Bash  find   -name  quot  lt old-name gt  component   quot  -exec rename  s    lt old-name gt   component    lt new-name gt  component           PowerShell   Get-Item  lt old-name gt  component         Rename-Item     lt new-name gt  component      Extension     Cmd  rename  lt old-name gt  component    lt new-name gt  component    5 Replace file references in  Component  use VSCode s Replace in Files    lt old-name gt  component   gt   lt new-name gt  component  Result   Component           templateUrl      lt old-name gt  component html    gt      lt old-name gt  component html     styleUrls       lt old-name gt  component scss     gt       lt new-name gt  component scss       That should be sufficient

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    Create the new component you liked   ng generate component newName Use Visual studio code editor or whatever other editor to then  conveniently move code pieces side by side  In Linux  use grep  amp  sed  find  amp  replace  to find replaces references   grep -ir  oldname   cd your folder  sed -i  s oldName newName g

[angular] How to rename a component in Angular CLI?

Examples related to angular

Examples related to angular-cli

Examples related to rename

Examples related to angular-components