如何在 Angular CLI 中重命名组件？

不！

没有命令会更改使用组件创建命令生成的所有文件的名称。因此创建的 ts、html、css/scss、.spec.ts 文件需要手动重命名/编辑。

我是 angular cli 的常客，我认为这将是一个很好的命令，因为有时我们只是创建角度组件并需要重命名它们。由于此重命名命令不存在，因此删除创建的角度组件、指令等并再次运行命令以创建组件确实很痛苦。

这是添加此功能的讨论链接 rename angular component

---

目前 Angular CLI 不支持重命名或重构代码的功能。

您可以在某些 IDE 的帮助下实现此类功能。

Intellij、Eclipse、VSCode 等。默认支持重构。

现在 VSCode 呈现出一些上升趋势，我个人是这个的粉丝

使用 VSCode 进行重构

确定参考： - VS Code 通过选择变量并按下快捷键 SHIFT + F12 来帮助您查找变量的所有参考。这与 Type Script 配合得非常好。

重命名所有引用实例：- 找到所有引用后，您可以按 F2 将打开一个弹出窗口，您可以更改值并单击输入，这将更新所有引用实例。

重命名文件和导入 您可以使用插件重命名文件及其导入引用。可以找到更多详细信息here

https://i.stack.imgur.com/QTtxv.gif

通过重命名变量和文件后的上述步骤，您可以实现角度组件重命名。

---

是的！

现在有。

VS Code 有一个扩展程序可以为您完成所有这些步骤。它称为 Rename Angular Component。

我希望稍后将其移植到 WebStorm 和 Schematic。

以前，在 VS Code 中至少需要三个半自动化步骤。这个扩展完成了所有这些。

我意识到这是在推广我自己的解决方案。但它是免费的、开源的和完整的答案。如果它不能满足您的所有需求，您可以在 repo 上发布问题，它会得到改进。

---

这是我用来重命名组件的清单：

1.重命名组件类（VSCode重命名符号将更新所有引用）

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

2.Rename @Component 选择器连同引用（使用VSCode的文件中的替换）：

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']
})

这应该足够了

---

虽然 OP 要求 CLI 命令，但一些答案集中在 IDE 上。在这个答案中，我只是确认当前的 WebStorm/IntelliJ 确实允许重命名组件。需要做的就是尝试重命名 .ts 文件中的类。您将看到：

https://i.stack.imgur.com/HL8UD.png

并且将在所有相关位置进行重命名。

---

我个人还没有找到任何相同的命令。只需创建一个新组件（重命名）并复制粘贴前一个组件的 html、css 和 ts。在 ts 中，类名显然会被替换。它是最安全的方法，但确实需要一点时间。

---

在 WebStorm 中，您可以在 TypeScript 文件中的组件名称上右键单击 → 重构 → 重命名，它将随处更改名称。

---

正如第一个答案所示，目前没有办法重命名组件，所以我们都在谈论变通方法！这就是我所做的：

创建您喜欢的新组件。 ng generate component newName 使用 Visual Studio 代码编辑器或任何其他编辑器，然后方便地并排移动代码/片段！在 Linux 中，使用 grep & sed（查找和替换）来查找/替换引用。 grep -ir "oldname" cd 你的文件夹 sed -i 's/oldName/newName/g' *

---

如果您使用 VS Code，您可以重命名 .ts, .html, .css/.scss, .spec.ts 文件，IDE 会为您处理导入。因此，从您的组件导入文件的文件（例如 app.module.ts）不会有任何投诉。但是，您仍然必须在使用它的任何地方重命名组件名称。

---

只需按照您通常的想法重命名文件和组件，然后重新启动 ng serve。十分简单。

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

---

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

PS：您还必须删除旧组件的导入语句。

---