Question

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

Answer 1

没有！

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

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

以下是添加此功能{* 3}}

的讨论链接

Answer 2

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

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

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

如今VSCode正呈现一些上升趋势，我个人非常喜欢这个

使用VSCode重构

确定参考： - VS Code通过选择变量并按快捷键insert() + db.parcelDao().insert(parcel);来帮助您查找变量的所有引用。这对Type Script非常有用。

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

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

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

Answer 3

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

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

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

2.重命名@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']
})

应该够了

Answer 4

更新：要重命名您的组件，您可以使用： ng-rn

npm i ng-rn

<强>用法

  cd /path/to/angular-project/
  ng-rn old-button fancy-button

该工具在src / app /中查找组件。如果您的组件位于更复杂的路径中，如src / app / my-vip-components，则只需更改目录：

  cd src/app/my-vip-components
  ng-rn old-button fancy-button

在进行任何更改之前，请进行备份：）

Answer 5

请参阅angular-rename

安装

npm install -g angular-rename

使用

$ ./angular-rename OldComponentName NewComponentName

Answer 6

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

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

Answer 7

正如第一个答案所示，目前没有办法重命名组件，因此我们只是在谈论解决方法！这就是我的所作所为：

创建您喜欢的新组件。

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

grep -ir＆＃34; oldname＆＃34;

cd你的文件夹

sed -i＆＃39; s / oldName / newName / g＆＃39; *

Answer 8

我个人没有找到相同的命令。只需新建一个组件（重命名），然后复制粘贴上一个组件的html，css和ts。在ts中，显然将替换类名。这是最安全的方法，但需要一些时间。

Answer 9

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

Answer 10

只需按照通常的方式重命名文件和组件，然后重新启动ng serve。容易。

Answer 11

如果您使用的是 VS Code，您可以重命名 STRING:SECTION1/SECTION2/id_number_removed/SECTION3/SECTION4 文件，IDE 会为您处理导入。因此，从您的组件（例如 .ts, .html, .css/.scss, .spec.ts）导入文件的文件不会有任何抱怨。但是，您仍然需要在任何使用它的地方重命名组件名称。

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

11 个答案: