使用CLI删除组件的最佳方法是什么？

Question

我尝试使用“ng destroy component foo”，它告诉我“Angular-CLI不支持destroy命令”

我们如何使用Angular CLI正确删除组件？

Answer 1

CLI可能会出现{p> destroy或类似内容，但目前它不是主要关注点。所以你需要手动完成这个。

删除组件目录（假设您没有使用--flat），然后将其从声明它的NgModule中删除。

如果您不确定该怎么做，我建议你有一个“干净”的应用程序，意味着没有当前的git更改。然后生成一个组件并查看repo中的更改内容，以便您可以从那里回溯删除组件所需的操作。

更新

如果您只是在试验要生成的内容，可以使用--dry-run标志不在磁盘上生成任何文件，只需查看更新的文件列表。

Answer 2

1. 删除包含此组件的文件夹。
2. 在app.module.ts中删除此组件的import语句，并从@NgModule的声明部分删除其名称
3. 从index.ts中删除包含此组件的export语句的行。

Answer 3

由于尚未使用angular CLI

支持

所以这是可行的方法，在此之前请注意使用CLI创建组件/服务时会发生什么（例如ng g c demoComponent）。

1. 它会创建一个名为demoComponent（ng g c demoComponent）的单独文件夹。
2. 它生成HTML,CSS,ts和spec专用于demoComponent的文件。
3. 此外，它还在app.module.ts文件中添加依赖项，以将该组件添加到项目中。

所以按相反顺序执行

1. 从app.module.ts
删除依赖关系
2. 删除该组件文件夹。

Answer 4

目前Angular CLI不支持删除组件的选项，您需要手动执行此操作。

1. 从app.module
中删除每个组件的导入引用
2. 删除组件文件夹。

Answer 5

使用Visual Studio Code删除组件文件夹，并在Project Explorer（左侧）中查看颜色为Red的文件，这意味着文件会受到影响并产生错误。打开每个文件并删除使用该组件的代码。

Answer 6

我编写了一个bash脚本，该脚本应自动执行下面Yakov Fain编写的过程。它可以像 ./ removeComponent myComponentName 一样被调用。仅在Angular 6中进行了测试

#!/bin/bash
if [ "$#" -ne 1 ]; then
    echo "Input a component to delete"
    exit 1
fi

# finds folder with component name and deletes
find . -type d -name $1 | xargs rm -rf

# removes lines referencing the component from app.module.ts
grep -v $1 app.module.ts > temp
mv temp app.module.ts

componentName=$1
componentName+="Component"

grep -v -i $componentName app.module.ts > temp
mv temp app.module.ts

Answer 7

我不确定这是不是最好的方式，但它对我有用。

• 首先，我删除了组件文件夹。
• 然后，我清除了app.module.ts，app.component.ts＆amp; app.component.html与我想要删除的组件相关的导入和声明。
• 同样，我清除了main.ts.

我刚刚保存并刷新了应用程序并且工作正常。

Answer 8

Angular 2+的答案

删除app.modules.ts的组件from imports and declaration array。

第二次检查其引用是否已添加到其他模块中，如果是，则将其删除并

从应用程序

最后delete that component Manually到此您就完成了。

或者您也可以按相反的顺序进行操作。

Answer 9

来自app.module.ts：

• 擦除特定组件的导入行;
• 从@NgModule中删除声明;

然后删除要删除的组件的文件夹及其包含的文件（.component.ts，.component.html，.component.css和.component.spec.ts）。

完成。

-

我读过有人说要从main.ts中删除它。你不应该首先从那里导入它，因为它已经导入了AppModule，而AppModule是导入你创建的所有组件的那个。

Answer 10

首先，删除必须删除的组件文件夹 然后删除你在＆＃34; ts＆＃34;中删除的条目。文件。

Answer 11

如果您在CLI中查找某个命令，那么ans现在是 NO 。 但您可以通过删除组件文件夹和所有引用来手动执行。

Answer 12

也不要忘记： -从路由模块中删除组件路径 -在整个项目中搜索组件的类名

Answer 13

我需要删除其spec文件错误的Angular 6指令。即使在删除有问题的文件，删除所有对它的引用并重建应用程序之后，TS仍然报告相同的错误。对我有用的是重新启动Visual Studio-这清除了错误以及旧的不需要的指令的所有痕迹。

Answer 14

Angular CLI不支持此功能，因此他们不希望很快将其包含在内。

以下是实际创建的问题的链接-https://github.com/angular/angular-cli/issues/1776

以及官员们解决方案的屏幕截图-

Answer 15

我现在正在使用角度10。手动删除所有文件和引用后，然后我重新运行“ ng serve”，就可以了。