How to rename a component in Angular CLI?

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

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 importsYou 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.

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>.componentResult:@Component({  ...  templateUrl: './<old-name>.component.html' => './<old-name>.component.html',  styleUrls: ['./<old-name>.component.scss'] => ['./<new-name>.component.scss']})

That should be sufficient