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

I needed to delete an Angular 6 directive whose spec file was erroneous. Even after deleting the offending files, removing all references to it and rebuilding the app, TS was still reporting the same error. What worked for me was restarting Visual Studio - this cleared the error and all traces of the old unwanted directive.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.