Here is a checklist I use to rename a component:
1.Rename the component class (VSCode Rename Symbool 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>.compoonent.* => <new-name>.compoonent.*
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