Eliminar componente en Angular

Rana Hasnain Khan 23 mayo 2022

Angular Angular Component

Presentaremos cómo podemos eliminar un componente en Angular.

Eliminar componente en Angular

Cuando estamos creando una aplicación web que contiene varios componentes, es posible que nos encontremos con una situación en la que tengamos que eliminar un componente por algún motivo.

Es bastante fácil crear un componente en Angular usando Angular CLI, pero no hay opción para eliminar un componente usando Angular CLI, por lo que tenemos que eliminarlo manualmente.

Eliminar un componente no es fácil, ya que puede fallar nuestra aplicación web si todas las instancias de nuestro componente no se eliminan correctamente.

Este tutorial pasa por un ejemplo en el que crearemos un componente usando Angular CLI y luego lo eliminaremos paso a paso para que sea más fácil de entender y seguir todos los pasos.

Vamos a crear una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Crearemos un nuevo componente usando el siguiente comando.

# angular
ng g c newcomponent

Puede ver que se crea una nueva carpeta newcomponent dentro de la carpeta Aplicación que contiene 3 archivos newcomponent.component.ts, newcomponent.component.html y newcomponent.component.css. Ahora, analicemos cómo podemos eliminar este componente.

Siga estos pasos para eliminar fácilmente un componente sin ningún error en nuestra aplicación web.

Eliminar la carpeta del componente newcomponent, incluidos todos los archivos que contiene.
Si su componente no tiene una carpeta separada, es posible que deba eliminar los archivos que tienen el mismo nombre que su componente. En mi ejemplo, eliminaremos 3 archivos newcomponent.component.ts, newcomponent.component.html y newcomponent.component.css.
Abra app.module.ts y borre donde se importa su componente, como se muestra a continuación.
```
# angular
import { NewComponent } from './newcomponent.component';
```

Ahora elimine la declaración del componente dentro de `@NgModule` como se muestra a continuación.

# angular
 @NgModule({
 imports:      [ BrowserModule, FormsModule ],
 declarations: [ AppComponent, HelloComponent, NewComponent ],
 bootstrap:    [ AppComponent ]
})

Después de seguir estos pasos, podemos iniciar nuestra aplicación web usando el siguiente comando.

# angular
ng build
ng serve

Cargará nuestra aplicación web sin ningún error. Podemos eliminar un componente de forma manual y correcta siguiendo estos sencillos y sencillos pasos.

Autor: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Eliminar componente en Angular

Eliminar componente en Angular

Eliminar la carpeta del componente `newcomponent`, incluidos todos los archivos que contiene.

Si su componente no tiene una carpeta separada, es posible que deba eliminar los archivos que tienen el mismo nombre que su componente. En mi ejemplo, eliminaremos 3 archivos `newcomponent.component.ts`, `newcomponent.component.html` y `newcomponent.component.css`.

Abra `app.module.ts` y borre donde se importa su componente, como se muestra a continuación.

Ahora elimine la declaración del componente dentro de `@NgModule` como se muestra a continuación.

Artículo relacionado - Angular Component

Eliminar componente en Angular

Eliminar la carpeta del componente newcomponent, incluidos todos los archivos que contiene.

Si su componente no tiene una carpeta separada, es posible que deba eliminar los archivos que tienen el mismo nombre que su componente. En mi ejemplo, eliminaremos 3 archivos newcomponent.component.ts, newcomponent.component.html y newcomponent.component.css.

Abra app.module.ts y borre donde se importa su componente, como se muestra a continuación.

Ahora elimine la declaración del componente dentro de @NgModule como se muestra a continuación.

Artículo relacionado - Angular Component

Eliminar la carpeta del componente `newcomponent`, incluidos todos los archivos que contiene.

Si su componente no tiene una carpeta separada, es posible que deba eliminar los archivos que tienen el mismo nombre que su componente. En mi ejemplo, eliminaremos 3 archivos `newcomponent.component.ts`, `newcomponent.component.html` y `newcomponent.component.css`.

Abra `app.module.ts` y borre donde se importa su componente, como se muestra a continuación.

Ahora elimine la declaración del componente dentro de `@NgModule` como se muestra a continuación.