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, angular 9, angular 10 and angular 11 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:

[email protected]:/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: