Angular Delete a Component From Cli Example

Now, let's see article of delete component in angular command. We will look at example of angular delete a component. We will use angular remove component from cli. i would like to show you angular 9 delete 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 and angular 9 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...