Quelle est la meilleure façon de supprimer un composant avec CLI

J’ai essayé d’utiliser “ng destroy component foo” et il me dit “La commande destroy n’est pas supscope par Angular-CLI”

Comment supprimons-nous correctement les composants avec CLI angular?

destroy ou quelque chose de similaire peut venir à la CLI, mais ce n’est pas un objective principal en ce moment. Donc, vous devrez le faire manuellement.

Supprimez le répertoire du composant (en supposant que vous n’utilisiez pas --flat ), puis supprimez-le du NgModule dans lequel il est déclaré.

Si vous ne savez pas quoi faire, je vous suggère d’avoir une application “propre”, ce qui signifie qu’aucune modification de git n’est en cours. Ensuite, générez un composant et voyez ce qui est modifié dans le repository afin de pouvoir revenir en arrière sur ce que vous devrez faire pour supprimer un composant.

Mettre à jour

Si vous ne faites qu’expérimenter ce que vous voulez générer, vous pouvez utiliser l’ --dry-run pour ne pas produire de fichiers sur le disque, il suffit de voir la liste des fichiers mis à jour.

  1. Supprimez le dossier contenant ce composant.
  2. Dans app.module.ts, supprimez l’instruction import pour ce composant et supprimez son nom de la section de déclaration de @NgModule.
  3. Supprimez la ligne contenant l’instruction d’exportation pour ce composant de index.ts.

Comme il n’est pas encore pris en charge à l’aide de la CLI angular

Voici donc la manière possible, avant cela, observez ce qui se passe lorsque vous créez un composant / service à l’aide de l’interface de ligne de commande (par exemple, ng gc demoComponent ).

  1. Il crée un dossier séparé nommé demoComponent ( ng gc demoComponent ).
  2. Il génère des fichiers HTML,CSS,ts et un fichier de spec dédié à demoComponent.
  3. En outre, il ajoute une dépendance dans le fichier app.module.ts pour append ce composant à votre projet.

alors faites-le dans l’ordre inverse

  1. Supprimer la dépendance de app.module.ts
  2. Supprimez ce dossier de composant.

Actuellement, l’interface CLI angular ne prend pas en charge l’option permettant de supprimer le composant, vous devez le faire manuellement.

  1. Supprimer les références d’importation pour chaque composant de app.module
  2. Supprimer les dossiers de composants.

À l’aide de Visual Studio Code, supprimez le dossier du composant et affichez dans l’Explorateur de projets (à gauche) les fichiers qui colorent le rouge, ce qui signifie que les fichiers sont affectés et qu’ils génèrent des erreurs. Ouvrez chaque fichier et supprimez le code qui utilise le composant.

Je ne sais pas si c’est le meilleur moyen, mais cela a fonctionné pour moi.

  • Tout d’abord, j’ai supprimé le dossier du composant.
  • Ensuite, j’ai effacé app.module.ts, app.component.ts & app.component.html des importations et des déclarations liées au composant que je voulais supprimer.
  • De même, j’ai effacé les fichiers main.ts.

Je viens de sauvegarder et de rafraîchir l’application et cela a fonctionné.

De app.module.ts:

  • effacer la ligne d’importation pour le composant spécifique;
  • effacer sa déclaration de @NgModule;

Supprimez ensuite le dossier du composant que vous souhaitez supprimer et ses fichiers inclus ( .component.ts , .component.html , .component.css et .component.spec.ts ).

Terminé.

Je lis des gens à propos de l’effacer de main.ts. Vous n’étiez pas censé l’importer à partir de là car il importe déjà AppModule, et AppModule est celui qui importe tous les composants que vous avez créés.

Tout d’abord, supprimez le dossier composant que vous devez supprimer, puis supprimez ses entrées que vous avez créées dans les fichiers “ts”.

Si vous recherchez une commande dans CLI, Then ans est NON pour le moment. Mais vous pouvez le faire manuellement en supprimant le dossier du composant et toutes les références.

J’ai écrit un script bash qui devrait automatiser le processus écrit par Yakov Fain ci-dessus. Il peut être appelé comme ./removeComponent myComponentName

 #!/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