How to Remove A Component in Angular?

Are you looking for example of how to delete a component in angular. let’s discuss about how to remove a component in angular. This article will give you simple example of delete component in angular command. We will look at example of angular delete a component.

Angular does not have any command to remove created component in your application. but you can follow bellow step to remove component from your angular application. i will show you creating component and we will delete that created component from our application.

This example will also help you to delete component from angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 application.

So, first if you created on "demo" component using ng command. for example you are creating component as bellow:

ng generate component demo

After run that command you can see there is created some files and updated file list as like bellow:

hari@hari-pc:/var/www/me/ang9/appEnv$ ng generate component demo
CREATE src/app/demo/demo.component.css (0 bytes)
CREATE src/app/demo/demo.component.html (19 bytes)
CREATE src/app/demo/demo.component.spec.ts (614 bytes)
CREATE src/app/demo/demo.component.ts (267 bytes)
UPDATE src/app/app.module.ts (388 bytes)

Now i will show you how to delete demo component from your angular application:

Step 1: Remove Import Line:

Here, you need to remove import line from app.module.ts file of your app.

you can remove as i showed you bold on bellow file code:

remove following lines:

import { DemoComponent } from './demo/demo.component';

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { DemoComponent } from './demo/demo.component';
  
@NgModule({
  declarations: [
    AppComponent,
    DemoComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2: Remove Declaration Line:

Here, you need to remove component declaration line from @NgModule declaration array in app.module.ts file of your app.

you can remove as i showed you bold on bellow file code:

remove following lines:

import { DemoComponent } from './demo/demo.component';
DemoComponent

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { DemoComponent } from './demo/demo.component';
  
@NgModule({
  declarations: [
    AppComponent,
    DemoComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Remove Manually Component Files:

Here, you need to delete manually all the files of demo component as list bellow.

src/app/demo/demo.component.css
src/app/demo/demo.component.html
src/app/demo/demo.component.spec.ts
src/app/demo/demo.component.ts

Now at last, if you give any references of component then you have to remove it.

So this way you can easily remove your component from angular cli.

I hope it can help you...