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

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

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

destroy或类似的东西可能会出现在CLI上，但这不是当前的重点。因此，您将需要手动执行此操作。

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

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

更新资料

如果您只是想尝试生成什么，可以使用该--dry-run标志在磁盘上不生成任何文件，只需查看更新的文件列表即可。

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

由于尚不支持使用角度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. 删除该组件文件夹。

当删除依赖项时，您必须做两件事。

1. 从app.module.ts文件中删除导入行引用。
2. 从app.module.ts中的@NgModule声明数组中删除组件声明。

使用Visual Studio Code，删除组件文件夹，并在项目资源管理器（左侧）中看到显示红色的文件，这表示文件受到影响并产生了错误。打开每个文件，并删除使用该组件的代码。

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

1. 从app.module中删除每个组件的导入引用
2. 删除组件文件夹。
3. 您还需要从app.module.ts文件中的@NgModule声明数组中删除组件声明

我编写了一个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

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

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

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

Angular 2+的答案

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

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

终于delete that component Manually从应用程序，您就完成了。

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

从app.module.ts中：

• 删除特定组件的导入行；
• 从@NgModule删除其声明；

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

做完了

--

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

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

首先，删除组件文件夹，您必须先删除该文件夹，然后再删除在“ ts”文件中输入的条目。

如果您在CLI中寻找某些命令，那么ans暂时为NO。但是您可以通过删除组件文件夹和所有引用来手动完成。

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

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

还有官员们解决方案的屏幕截图-