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

borrar componente angular cli

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

Con Visual Studio Code, elimine la carpeta del componente 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.

Answer 4

Desde app.module.ts:

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

Luego, elimine la carpeta del componente que desea eliminar y sus archivos incluidos ( .component.ts , .component.html , .component.css y .component.spec.ts ).

Hecho.

-

Leí personas que decían 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ó.

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

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ó.

Answer 9

Respuesta para Angular 2+

Elimine el componente from imports and declaration array de from imports and declaration array de app.modules.ts.

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

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

O también puede hacerlo en orden inverso.

Answer 10

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

Answer 11

tampoco olvide: - eliminar la ruta del componente del módulo de enrutamiento - buscar el nombre de clase del componente en todo el proyecto

Answer 12

destroy o 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 utilizó --flat ) y luego elimínelo del NgModule en 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 cambios actuales de git . Luego, genere un componente y vea qué cambia en el repositorio para que pueda retroceder desde allí lo que necesitará hacer para eliminar un componente.

Actualizar

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

Answer 13

Dado que aún no es compatible con CLI angular

así que aquí está la manera posible, antes de eso, observe lo que sucede cuando crea un componente / servicio usando CLI (por ejemplo, ng gc demoComponent ).

1. Crea una carpeta separada llamada demoComponent ( ng gc demoComponent ).
2. Genera HTML,CSS,ts y un archivo de spec 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.