What is the best way to delete a component with CLI

Question

I tried using \"ng destroy component foo\" and it tells me \"The destroy command is not supported by Angular-CLI\"

How do we properly delete components with Angular

Answer 1

Currently Angular CLI doesn't support an option to remove the component, you need to do it manually.

1. Remove import references for every component from app.module
2. Delete component folders.
3. You also need to remove the component declaration from @NgModule declaration array in app.module.ts file

Answer 2

If you looking for some command in CLI, Then ans is NO for now. But you can do manually by deleting the component folder and all the references.

Answer 3

From app.module.ts:

• erase import line for the specific component;
• erase its declaration from @NgModule;

Then delete the folder of the component you want to delete and its included files (.component.ts, .component.html, .component.css and .component.spec.ts).

Done.

-

I read people saying about erasing it from main.ts. You were not supposed to import it from there in the first place as it already imports AppModule, and AppModule is the one importing all the components you created.

Answer 4

First of all, remove component folder, which you have to delete and then remove its entries which you have made in "ts" files.

Answer 5

Angular 10 now I am using. After manually deleting all files and references then I re-run "ng serve", it worked.

Answer 6

I wrote a bash script that should automate the process written by Yakov Fain below. It can be called like ./removeComponent myComponentName This has only been tested with 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