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 CLI

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  gt  temp mv temp app module ts  componentName  1 componentName   Component   grep -v -i  componentName app module ts  gt  temp mv temp app module ts

User · Answer

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  amp  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

User · Answer

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     It creates a separate folder named demoComponent  ng g c demoComponent   It generate HTML CSS ts and a spec file dedicated to demoComponent  Also  It adds dependency inside app module ts file to add that component to your project    so do it in reverse order   Remove Dependency from app module ts Delete that component folder    when removing the dependency you have to do two things    Remove the import line reference from app module ts file  Remove the component declaration from  NgModule declaration array in app module ts

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This is not supported by Angular CLI and they are in no mood to include it any time soon   Here is the link to the actual created issue - https   github com angular angular-cli issues 1776  And a screenshot of the solution from the officials -

User · Answer

Currently Angular CLI doesn t support an option to remove the component  you need to do it manually    Remove import references for every component from app module Delete component folders  You also need to remove the component declaration from  NgModule declaration array in app module ts file

[angular] What is the best way to delete a component with CLI

Examples related to angular

Examples related to angular-cli