How to Remove A Component in Angular?

By Hardik Savani | June 13, 2020 | Category : 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 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...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: