Angular Delete a Component From Cli Example

July 14, 2020 | Category : Angular

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...