Angular has given commands to create components and modules. Those commands create 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 line on its own. That we have to do on our own.

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

Removing a Component

When we create a new component , angular automatically imports it in the moduleName.module.ts file, so before deleting the component folder we need to remove these import lines from that file.

Import Lines in the moduleName.module.ts file will look something similar to this:

import { Component_nameComponent } from './component_name/component_name.component';

@NgModule({
    declarations: [
    Component_nameComponent,
    OtherComponentsDeclaration
    ],
    ...
)}

Remove the import line at the top, and then remove the component_nameComponent from the declarations array.

Thats all the lines you need to remove before deleting the components folder, now you can delete the component_name folder.

Removing a Module

If you want to remove a module from the project, you just need to remove some lines from the routes.ts file where we previously created a route for our module.

Remove the below give lines from that file:

{
    path: 'new_Module_path',
    loadChildren: () => import('/relative_path_for_module/module_name.module').then(m => m.Module_nameModule)
},

Now you can delete the module folder from your project. Along with the modules folder all the components inside it will also be deleted, so make sure you do not have anything that you do not want to delete inside this module.

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