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

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

如何使用Angular CLI正确地删除组件?

515673 次浏览
小开
最佳答案

destroy或类似的东西可能会出现在CLI中，但它不是目前的主要焦点。因此，您需要手动执行此操作。

删除组件目录(假设你没有使用--flat)，然后从声明它的NgModule中删除它。

如果你不确定要做什么，我建议你有一个“干净”的应用程序，这意味着当前没有git变化。然后生成一个组件，并查看在repo中更改了什么，这样您就可以从那里回溯删除组件所需做的事情。

更新

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

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

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

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

因为angular CLI还不支持它

所以这是可能的方法，在此之前，请观察当你使用CLI创建一个组件/服务时会发生什么(例如ng g c demoComponent)。

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

所以按相反的顺序来做

  1. 从app.module.ts中移除依赖项
  2. 删除该组件文件夹。

在消除依赖时，您必须做两件事。

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

我不确定这是否是最好的方法，但它对我来说很有效。

  • 首先，我删除了组件文件夹。
  • 然后，我清除了app.module。t, app.component.ts &与我想删除的组件相关的导入和声明的app.ponent .html。
  • 类似地，我清除了main.ts。

我只是保存并刷新了应用程序，它工作了。

小开

从app.module.ts:

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

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

完成了。

-

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

小开
首先，删除组件文件夹，你必须删除 然后删除你在“ts”文件中所做的条目
小开

如果你在CLI中寻找一些命令，那么ans现在是没有。 但是你可以做手动删除组件文件夹和所有的引用

小开

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

小开

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

这是Angular 2+的答案

从app.modules.ts中移除组件from imports and declaration array。

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

最后delete that component Manually从app，你就完成了。

或者你也可以反过来做。

小开

我需要删除一个Angular 6指令，它的规范文件是错误的。即使在删除了违规文件，删除了对它的所有引用并重新构建应用程序后，TS仍然报告了相同的错误。对我有用的是重新启动Visual Studio -这清除了错误和所有不需要的旧指令的痕迹。

小开

这是Angular CLI不支持的，而且他们也不打算很快把它包括进来。

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

和官方解决方案的截图- enter image description here < / p >

小开

我现在使用的是Angular 10。在手动删除所有文件和引用后，我重新运行“ng service”，它工作了。


提交答案