Angular has given commands to create components. Those commands create a few files and import those components where they are required automatically.

But it doesn't provide any command yet to delete those components and remove those import lines on its own. That we have to do on our own.

In this guide, we will see what lines you need to delete before deleting the entire folder of a component.

1. Delete the Component Folder:
   • Go to your project's src/app folder.
   • Find the folder corresponding to the component you want to remove.
   • Delete the entire folder (including the .ts, .html, .scss, and .spec.ts files related to that component).
2. Remove Component Imports:
   • You’ll have to remove the import of the standalone component where it has been imported.
   • Find and remove the import statements for the component from other files in your project.
   • These imports will typically look like

     import { Component_name } from './component_name/component_name';

   • You need to remove these import statements from any file where this component is used.
3. Remove Component References:
   • After deleting the import statement, remove all references to that component from the templates and the TypeScript files where it was used.
   • For example, if you were using the component like this in another component's template:

     <app-my-component></app-my-component>

   • Make sure to remove or replace all instances of this component in your HTML templates or TypeScript files.
4. Update Routing:
   • If the component you are removing was part of a route in the routing configuration, make sure to remove any references to it in your app.routes.ts (or wherever your routing configuration exists).
   • For example, if the component was used in the routes:

     const routes: Routes = [
       { path: 'my-component', component: MyComponent },
     ];

Warning: Make sure that you remove the link for these pages that you have deleted from your sidebar as well. Follow our Sidebar Guide to know how to manipulate links in the sidebar.