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

Question

除了手动编辑所有组件文件（例如文件夹名称、.css、.ts、spec.ts 和app.module.ts？

Answer 1

没有！

没有命令可以更改使用组件创建命令生成的所有文件的名称。于是创建了ts、html、css/scss、.spec.ts 文件需要手动 renamed/edited.

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

这里是讨论link添加这个功能rename angular component

Answer 2

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

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

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

现在 VSCode 显示出一些上升趋势，我个人很喜欢这个

重构 VSCode

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

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

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

将变量和文件重命名后通过以上步骤即可实现angular组件重命名。

Answer 3

如第一个答案所示，目前无法重命名组件，所以我们都在谈论 work-arounds！这就是我所做的：

创建您喜欢的新组件。

ng 生成组件 newName
使用 Visual studio 代码编辑器或任何其他编辑器，然后方便地并排移动 code/pieces！
在 Linux 中，使用 grep & sed（查找和替换）到 find/replaces 引用。

grep -ir "oldname"

cd 你的文件夹

sed -i 's/oldName/newName/g' *

Answer 4

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

Answer 5

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

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

Answer 6

在WebStorm中，在TypeScript文件中的组件名称上右键→Refactor→Rename，到处都会改名。

Answer 7

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

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

Answer 8

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

Answer 9

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

1.Rename组件class（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.Rename 组件文件夹（在 VSCode 中重命名文件夹时，它会更新模块和其他组件中的引用）

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

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

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

应该够了

Answer 10

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

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

Answer 11

是的！

现在有了。

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

我希望稍后将其移植到 WebStorm 和原理图中。

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

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

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

How to rename a component in Angular CLI?

rename

angular-cli

angular-components

angular