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

Posted 2023-03-13

【中文标题】使用 CLI 删除组件的最佳方法是啥

【英文标题】：What is the best way to delete a component with CLI使用 CLI 删除组件的最佳方法是什么

【发布时间】：2017-05-12 07:20:58

【问题描述】：

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

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

【问题讨论】：

CLI 还不支持它，但是如果你确保在创建组件之前 git 提交了旧的更改，你可以删除新文件，并对更改的文件执行 git checkout（或者只是git checkout src).

这是一个巧妙的技巧。它确实有效。Angular 团队迟早会解决这个问题。我认为他们目前正忙于处理其他问题。但我认为目前我们必须接受你的解决方案。将此作为答案发布。 @SanjayVerma

【参考方案1】：

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

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

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

更新

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

【参考方案2】：

删除包含此组件的文件夹。 在 app.module.ts 中删除该组件的导入语句，并从 @NgModule 的声明部分中删除其名称 从 index.ts 中删除包含此组件的导出语句的行。

【讨论】：

index.ts 在哪里？谢谢

在最新版本的 CLI 中他们不会生成它。

我认为还少了一步...再次运行 ng serve ，不是吗？

index.ts?不在 5 内

在Angular6中，需要从app-routing.module.ts中移除import语句

【参考方案3】：

由于尚不支持使用 angular CLI

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

它会创建一个名为demoComponent (ng g c demoComponent) 的单独文件夹。 它会生成 html,CSS,ts 和一个专用于 demoComponent 的 spec 文件。 另外，它会在 app.module.ts 文件中添加依赖项，以将该组件添加到您的项目中。

以相反的顺序进行

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

当移除依赖时你必须做两件事。

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

【参考方案4】：

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

【参考方案5】：

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

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

【参考方案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

【讨论】：

如果将来 angular cli 发生变化，请为我添加注释以更改此设置

【参考方案7】：

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

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

我刚刚保存并刷新了应用程序，它可以工作。

【参考方案8】：

Angular 2+的答案

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

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

最后delete that component Manually 来自应用程序，你就完成了。

或者你也可以按相反的顺序来做。

【参考方案9】：

Angular CLI 不支持此功能，他们也没有心情在短期内包含它。

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

还有官方给出的解决方案截图——

【参考方案10】：

来自 app.module.ts：

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

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

完成。

-

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

【参考方案11】：

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

【参考方案12】：

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

【参考方案13】：

首先，删除你必须删除的组件文件夹 然后删除您在“ts”文件中创建的条目。

【参考方案14】：

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