¿Cuál es la mejor manera de eliminar un componente con CLI?


227

Intenté usar "ng destroy component foo" y me dice "El comando de destrucción no es compatible con Angular-CLI"

¿Cómo eliminamos correctamente los componentes con Angular CLI?


2
Todavía no es compatible con CLI, sin embargo, si se aseguró de que los cambios anteriores se hayan confirmado con git antes de crear el componente, simplemente puede eliminar los archivos nuevos y realizar la comprobación de git en los modificados (o simplemente git checkout src).
Sanjay Verma

Es un truco inteligente. Funciona con seguridad. El equipo angular tendrá que abordar este problema tarde o temprano. Creo que actualmente están ocupados con otros problemas. Pero creo que por el momento tenemos que vivir con su solución. Publique esto como respuesta. @SanjayVerma
Aman

Respuestas:


167

destroyo algo similar puede llegar a la CLI, pero no es un enfoque principal en este momento. Por lo tanto, deberá hacer esto manualmente.

Elimine el directorio de componentes (suponiendo que no haya utilizado --flat) y luego quítelo del lugar NgModuleen el que se declara.

Si no está seguro de qué hacer, le sugiero que tenga una aplicación "limpia", lo que significa que no hay gitcambios actuales . Luego, genere un componente y vea qué cambia en el repositorio para que pueda retroceder desde allí lo que deberá hacer para eliminar un componente.

Actualizar

Si solo está experimentando sobre lo que desea generar, puede usar el --dry-runindicador para no producir ningún archivo en el disco, solo vea la lista de archivos actualizada.


132
  1. Elimine la carpeta que contiene este componente.
  2. En app.module.ts, elimine la declaración de importación para este componente y elimine su nombre de la sección de declaración de @NgModule
  3. Elimine la línea con la declaración de exportación para este componente de index.ts.

12
¿Dónde está index.ts? Gracias
Shane G

40
en las últimas versiones de CLI no lo generan.
Yakov Fain

77
Creo que falta un paso más ... ejecutar ng serve de nuevo, ¿no?
gsalgadotoledo

index.ts? No en 5
Andrew Koper

2
en Angular6, necesita eliminar la declaración de importación de app-routing.module.ts
tyro

26

Como todavía no es compatible con CLI angular

así que aquí está la forma posible, antes de eso, observe lo que sucede cuando crea un componente / servicio usando CLI (ej. ng g c demoComponent).

  1. Crea una carpeta separada llamada demoComponent( ng g c demoComponent).
  2. Genera HTML,CSS,tsy un specarchivo dedicado a demoComponent.
  3. Además, agrega dependencia dentro del archivo app.module.ts para agregar ese componente a su proyecto.

entonces hazlo en orden inverso

  1. Eliminar dependencia de app.module.ts
  2. Eliminar esa carpeta de componentes.

Al eliminar la dependencia, tienes que hacer dos cosas.

  1. Elimine la referencia de línea de importación del archivo app.module.ts.
  2. Elimine la declaración de componente de la matriz de declaración @NgModule en app.module.ts.

11

Con Visual Studio Code, elimine la carpeta de componentes y vea en el Explorador de proyectos (lado izquierdo) los archivos que se colorean en rojo, lo que significa que los archivos se ven afectados y producen errores. Abra cada archivo y elimine el código que usa el componente.


11

Actualmente, Angular CLI no admite una opción para eliminar el componente, debe hacerlo manualmente.

  1. Eliminar referencias de importación para cada componente de app.module
  2. Eliminar carpetas de componentes.
  3. También debe eliminar la declaración de componente de la matriz de declaración @NgModule en el archivo app.module.ts

5

Escribí un script bash que debería automatizar el proceso escrito por Yakov Fain a continuación. Se puede llamar como ./removeComponent myComponentName Esto solo se ha probado con Angular 6

#!/bin/bash
if [ "$#" -ne 1 ]; then
    echo "Input a component to delete"
    exit 1
fi

# finds folder with component name and deletes
find . -type d -name $1 | xargs rm -rf

# removes lines referencing the component from app.module.ts
grep -v $1 app.module.ts > temp
mv temp app.module.ts

componentName=$1
componentName+="Component"

grep -v -i $componentName app.module.ts > temp
mv temp app.module.ts

Agregue una nota para que cambie esto si el cli angular cambia en el futuro
Aidan Grimshaw

3

No estoy seguro de si es la mejor manera, pero funcionó para mí.

  • Primero, eliminé la carpeta de componentes.
  • Luego, borré app.module.ts, app.component.ts & app.component.html de las importaciones y declaraciones relacionadas con el componente que quería eliminar.
  • Del mismo modo, borré main.ts.

Acabo de guardar y actualizar la aplicación y funcionó.


3

Respuesta para Angular 2+

Eliminar componente from imports and declaration arrayde app.modules.ts.

En segundo lugar, compruebe que su referencia se agrega en otro módulo, en caso afirmativo, elimínelo

finalmente delete that component Manuallydesde la aplicación y ya está.

O puede hacerlo también en orden inverso.


2

Desde app.module.ts:

  • borrar la línea de importación para el componente específico;
  • borrar su declaración de @NgModule;

A continuación, elimine la carpeta del componente que desee eliminar y sus archivos incluidos ( .component.ts, .component.html, .component.cssy .component.spec.ts).

Hecho.

-

Leí gente que decía sobre borrarlo de main.ts. Se suponía que no debía importarlo desde allí en primer lugar, ya que ya importa AppModule, y AppModule es el que importa todos los componentes que creó.


2

Necesitaba eliminar una directiva Angular 6 cuyo archivo de especificaciones era erróneo. Incluso después de eliminar los archivos ofensivos, eliminar todas las referencias y reconstruir la aplicación, TS seguía informando el mismo error. Lo que funcionó para mí fue reiniciar Visual Studio: esto eliminó el error y todos los rastros de la antigua directiva no deseada.


0

En primer lugar, elimine la carpeta de componentes, que debe eliminar y luego elimine las entradas que ha realizado en los archivos "ts".


0

Si está buscando algún comando en la CLI, entonces ans es NO por ahora. Pero puede hacerlo manualmente eliminando la carpeta del componente y todas las referencias.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.