Best way to delete components in Angular 9 with CLI?

This tutorial guides you on the best way to delete components in Angular 9. Are you trying to delete components in Angular 9 with CLI ? Let’s see what options ng generate command provides you for this.

Best way to delete components in Angular 9 with CLI

The following angular CLI command will generate all classes required for your new component (let’s say footer component). It creates a separate folder named “footer” under “src/app” folder. Then it generates .html, .css, typescript (.ts) and unit test (.spec.ts) files as shown below.

> ng g c footer 

CREATE src/app/footer/footer.component.html (21 bytes)
CREATE src/app/footer/footer.component.spec.ts (628 bytes)
CREATE src/app/footer/footer.component.ts (275 bytes)
CREATE src/app/footer/footer.component.css (0 bytes)
UPDATE src/app/app.module.ts (1331 bytes)

Also, it will update app.module.ts file to include the following

Import FooterComponent

import { FooterComponent } from './footer/footer.component'

Update @NgModule declarations array

@NgModule({
  declarations: [
    AppComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

The folder structure looks like below.

📂src
| — 📂 app
| — | — 📂 footer
| — | — | — 📜 footer.component.html
| — | — | — 📜 footer.component.ts
| — | — | — 📜 footer.component.css
| — | — | — 📜 footer.component.spec.ts
| — | — 📂 app.component.html
| — | — 📂 app.component.ts
| — | — 📂 app.component.css
| — | — 📂 app.component.spec.ts

Now, let’s see how to delete components in angular.

Delete/ Rename/ Move Components in Angular

As per the details in the issues link below, Angular is not supporting destroy command or any other similar command to remove the generated stuffs and it is not in their radar now. Therefore, the best way to delete components in angular is by manual process.

To delete angular component that was generated using angular CLI command you need to follow the manual steps below.

Step 1: First delete the folder “footer” containing all the classes of the generated component.

Step 2: Remove the import statement which was added to import FooterComponent and remove the FooterComponent name from the declarations array of @NgModule (refer above).

No need to delete components in Angular with –dryRun option

There is another option you can explore if you wanted to run ng generate component command without writing out results.

The following ng generate component command with –dryRun true option it just simulates what class files and folders it creates, but no changes will be made to the file system as shown.

> ng g c footer --dryRun true
CREATE src/app/footer1/footer.component.html (22 bytes)
CREATE src/app/footer1/footer.component.spec.ts (635 bytes)
CREATE src/app/footer1/footer.component.ts (279 bytes)
CREATE src/app/footer1/footer.component.css (0 bytes)
UPDATE src/app/app.module.ts (1417 bytes)

NOTE: The "dryRun" flag means no changes were made.

That’s it. Hope it helped 🙂

Also See:

References:

angular docs