Argthtjtr

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.

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.

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.

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.

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.

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

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 for Angular 2+

Remove component from imports and declaration array of app.modules.ts.

Second check its reference is added in other module, if yes then remove it and

finally delete that component Manually from app and you are done.

Or you can do it in reverse order also.