Angular has given commands to create components and routes. 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 routes_name.routes.ts file, so before deleting the component folder we need to remove these import lines from that file.

Import Lines in the routes_name.routes.ts file will look something similar to this:

import { Routes } from '@angular/router';
import { Component_nameComponent } from './component_name/component_name.component';

export const home: Routes = [
  {
    path: '',
    component: Component_nameComponent
  }
];

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 Routes

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

Remove the below give lines from that file:

import { Routes } from '@angular/router';

export const content: Routes = [
{
    path: 'new_path',
    loadChildren: () => import('relative_path_for_routes/routes_name.routes').then(m => m.routes_selector)
  }
]

Now you can delete the routes folder from your project. Along with the routes 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 routes.

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.