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...
Do you like below Tutorials ?
- Laravel 5.6 - Collection could not be converted to int
- Laravel - How to generate secure https URL from route?
- Laravel - Vue JS File Upload Example
- How to get last 7 days data in Laravel?
- Laravel Validation required if other field empty example
- Laravel Eloquent - When Case Statement in Select Query Example
- Laravel 7.x and 6.x Passing Variable to Javascript Example
- How to pass PHP variables in JavaScript or jQuery?