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

178

除了手动编辑所有组件文件（例如文件夹名称，.css，.ts，spec.ts和app.module.ts）之外，是否有使用Angular CLI重命名组件的快捷方式？

— 托马斯·埃索
source

1

如果要更改html标签，只需重命名选择器即可。如果要更改类，则需要手动进行。

— Alaksandar Jesus Gene

直到他们补充ng destroy您，您才不走运……

— William Hampshire

4

您可以在以下线程中监视功能：github.com/angular/angular-cli/issues/900

— Andrii Romanchak

搜索并替换，重命名几个文件/目录。...完成的工作

— ldgorman

180

没有！

没有命令可以更改使用component create命令生成的所有文件的名称。所以创造ts，html，css/scss，.spec.ts 文件需要手动重新命名/编辑。

我经常使用，angular cli我认为这是一个很好的命令，因为有时我们只是创建角度分量并需要重命名它们。由于此重命名命令不存在，因此删除创建的角度组件，指令等，然后再次运行该命令来创建组件确实很麻烦。

这是添加此功能的讨论链接重命名角度组件

— 阿尼鲁达·达斯（Aniruddha Das）
source

6

重用旧项目也很方便。

— Leo

1

WebStorm 2018.1.2单词的新功能允许重命名组件，但从未使用过。某天稍后会尝试

— Aniruddha Das '18

2

例如，在VSCode中，如果出现问题（导入的文件不存在，组件不存在等），您可以在左侧的文件浏览器窗格中看到错误指示。因此，在我的情况下，我需要重命名一个组件，我只是重命名了它的文件夹和内部文件名，然后我遵循了所有错误指示，并相应地修改了该组件的名称。我猜想这些功能在当今的其他现代IDE中也存在...但是，要有一个自动执行此操作的angular-cli命令（很像“ ng gc ...”），那就太好了！编码愉快！:)

— TheCuBeMan

1

自2016年以来，有关此功能的讨论一直在以下方面：github.com/angular/angular-cli/issues/900 对此类功能的所有请求都链接到此线程并关闭。@AniruddhaDas您介意将此添加到答案中吗？

— 斯特凡

1

@Stefan现在添加。看看是否不错，也可以随时进行编辑。

— 阿尼鲁达（Aniruddha Das）

48

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

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

Intellij，Eclipse，VSCode等。已默认支持重构。

如今，VSCode显示出一些上升趋势，我个人是对此的粉丝

用VSCode重构

确定性参考：-VS Code通过选择变量并按快捷键SHIFT+ 来帮助您找到该变量的所有参考F12。这对于Type Script非常有效。

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

重命名文件和导入 您可以使用插件重命名文件及其导入引用。更多细节可以在这里找到

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

— samuelj90
source

3

您谈论的是引用，文件和导入，但是重命名组件又如何呢？

— Ortomala Lokni，

1

@OrtomalaLokni angular-cli不支持重命名。重命名任务可以通过以下三个步骤来完成。

— samuelj90 '18

1

见角度重命名

安装

npm install -g angular-rename

用

$ ./angular-rename OldComponentName NewComponentName

— r
source

1

Github存储库不再存在

— Emmanuel

最糟糕的组件evet ...没有适当的文档，到处都是错误...好主意...但没用

— DS_web_developer

1

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

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

— 马雷基
source

这是@Aniruddha Das

— P Marecki

0

如第一个答案所示，当前无法重命名组件，因此我们都在讨论变通方法！这就是我的工作：

创建您喜欢的新组件。

ng生成组件newName
使用Visual Studio代码编辑器或其他任何编辑器，即可方便地并排移动代码/片段！
在Linux中，使用grep＆sed（查找和替换）查找/替换引用。

grep -ir“旧名”

cd您的文件夹

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

— 萨拉1
source

0

我个人还没有找到相同的命令。只是做一个新的组件（重新命名的名称），然后复制粘贴到前一个组件的html，css和ts。在ts明显的类名被撤换。它是最安全的方法，但需要一点时间。

— 普里扬卡·阿罗拉（Priyanka Arora）
source

0

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

— 奥利
source