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

Question

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

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

Answer 1

destroy或类似的东西可能会出现在CLI中,但目前它不是主要关注点.所以你需要手动完成.

删除组件目录(假设您没有使用--flat),然后将其从NgModule声明它的位置中删除.

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

更新

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

Answer 2

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

Answer 3

由于尚未使用角度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代码,删除组件文件夹,并在项目浏览器(左侧)中查看颜色为红色的文件,这意味着文件受到影响并产生错误.打开每个文件并删除使用该组件的代码.

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

Angular CLI 不支持这一点，而且他们短期内也没有心情将其包含在内。

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

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