就像你通常认为的那样重命名文件和组件，然后重新启动ng serve。容易peasy。

重命名文件、路径和引用。关键是您必须关闭正在运行的服务器，并在重命名所有内容后重新启动它。

要在Angular中更改组件名称，你需要遵循以下步骤:

打开包含要重命名的组件的文件。

找到组件类定义上方的@Component装饰器。

将@Component装饰器中的selector属性更改为您想要赋予组件的新名称。

例如，如果你想将组件名称从my-old-component更改为my-new-component，你可以这样做:

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

export class MyOldComponent {
  ...
}

保存文件。 就是这样!你已经成功地修改了Angular中的组件名称。

请记住，您可能还需要在应用程序的其他部分(如模板或路由配置)中更新对组件的任何引用。

如果你使用VS Code，你可以重命名。ts， .html， .css/。scss .spec。ts文件和IDE将为您处理导入。因此，从组件中导入文件的文件(如app.module.ts)将不会产生任何抱怨。但是，您仍然必须在使用组件的任何地方重命名组件名称。

在WebStorm中，你可以右键点击TypeScript文件中组件的名称→重构→重命名，它会在任何地方更改名称。

下面是我用来重命名组件的检查表:

1.重命名组件类(VSCode Rename Symbol将更新所有引用)

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

2.重命名@Component选择器和引用(使用VSCode的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.重命名组件文件夹(在VSCode中重命名文件夹时，会更新模块和其他组件中的引用)

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

4.重命名组件文件(手动重命名将是最快的，但您也可以使用终端一次重命名)

<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.替换@Component中的文件引用(使用VSCode的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']
})

这就足够了

目前还没有rename cli命令。但我发现解决这个问题最简单的方法是在cli上生成一个新组件，并将内容复制到新组件中。 然后删除原始组件，在代码库中需要重命名为新组件名称的每个位置都会出现一个错误。一旦所有错误都处理好了，你就完成了!：）

另外，您还必须删除旧组件的导入语句。