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?
No!
There is no command which will change the name of all files generated using 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 is a nice to have command as some time we just create angular components and need to rename it. 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 pain.
Here is the discussion link to add this feature rename angular component
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.
UPDATES: For rename you components, you can use: ng-rn
npm i ng-rn
Usage
cd /path/to/angular-project/
ng-rn old-button fancy-button
The Tool looks for the components in src/app/. If your components are located in a more complex path like src/app/my-vip-components, just change directory:
cd src/app/my-vip-components
ng-rn old-button fancy-button
Before any change, make your backups :)
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 & sed (find & replace) to find/replaces references.
grep -ir "oldname"
cd your folder
sed -i 's/oldName/newName/g' *
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.
see angular-rename
install
npm install -g angular-rename
use
$ ./angular-rename OldComponentName NewComponentName
来源：https://stackoverflow.com/questions/46411036/how-to-rename-a-component-in-angular-cli