Come eliminare un componente in Angular

Scopri come eliminare un componente in Angular. Questo tutorial ti aiuterà a rimuovere facilmente il componente dalla CLI Angular.

Angular non dispone di alcun comando per rimuovere il componente creato nella tua applicazione. Ma puoi seguire il passaggio seguente per rimuovere il componente dalla tua applicazione Angular. Ti mostrerò la creazione del componente ed elimineremo quel componente creato dalla nostra applicazione.

Quindi, prima se hai creato il componente "demo" usando il comando ng. ad esempio stai creando un componente come di seguito:

ng generate component demo

Dopo aver eseguito il comando puoi vedere che sono stati creati alcuni file e l'elenco dei file aggiornato come di seguito:

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)

Ora ti mostrerò come eliminare il componente demo dalla tua applicazione Angular:

Passaggio 1: rimuovere la riga di importazione:

Qui, devi rimuovere la riga di importazione dal file app.module.ts della tua app.

Puoi rimuovere come ti ho mostrato in grassetto nel codice del file seguente:

Rimuovi le seguenti righe:

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 { }

passaggio 2: rimuovere la riga della dichiarazione:

Qui, devi rimuovere la riga di dichiarazione del componente dall'array di dichiarazione @NgModule nel file app.module.ts della tua app.

Puoi rimuovere come ti ho mostrato in grassetto nel codice del file seguente:

Rimuovi le seguenti righe:

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 { }

Passaggio 3: rimuovere manualmente i file dei componenti:

Qui è necessario eliminare manualmente tutti i file del componente demo come elencato di seguito.

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

Ora finalmente, se fornisci qualche riferimento al componente, devi rimuoverlo.

In questo modo puoi rimuovere facilmente il tuo componente dalla CLI Angular.

#angular