What is the best way to delete a component with CLI

Question

destroy or something similar may come to the CLI, but it is not a primary focus at this time. So you will need to do this manually.

Delete the component directory (assuming you didn't use --flat) and then remove it from the NgModule in which it is declared.

If you are unsure of what to do, I suggest you have a "clean" app meaning no current git changes. Then generate a component and see what is changed in the repo so you can backtrack from there what you will need to do to delete a component.

Update

If you're just experimenting about what you want to generate, you can use the --dry-run flag to not produce any files on disk, just see the updated file list.

1. Delete the folder containing this component.
2. In the app.module.ts remove the import statement for this component and remove its name from the declaration section of @NgModule
3. Remove the line with the export statement for this component from index.ts.

Since it is not yet supported using angular CLI

so here is the possible way, before that please observe what happens when you create a component/service using CLI (ex. ng g c demoComponent).

1. It creates a separate folder named demoComponent (ng g c demoComponent).
2. It generate HTML,CSS,ts and a spec file dedicated to demoComponent.
3. Also, It adds dependency inside app.module.ts file to add that component to your project.

so do it in reverse order

1. Remove Dependency from app.module.ts
2. Delete that component folder.

when removing the dependency you have to do two things.

1. Remove the import line reference from app.module.ts file.
2. Remove the component declaration from @NgModule declaration array in app.module.ts.

Using Visual Studio Code, delete the component folder and see in the Project Explorer(left hand side) the files that colors Red that means the files are affected and produced errors. Open each files and remove the code that uses the component.

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

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

I am not sure if it is the best way, but it worked for me.

• First, I deleted the component folder.
• Then, I cleared app.module.ts, app.component.ts & app.component.html of the imports and declarations related to the component I wanted to delete.
• Similarly, I cleared main.ts.

I just saved and refreshed the app and it worked.