web-dev-qa-db-fra.com

Quel est le meilleur moyen de supprimer un composant avec CLI

J'ai essayé d'utiliser "ng destroy composant foo" et il me dit "La commande destroy n'est pas supportée par Angular-CLI"

Comment supprimer correctement les composants avec Angular CLI?

angularangular-cli
144
Jus10

destroy ou quelque chose de similaire peut arriver à la CLI, mais ce n'est pas un objectif principal pour le moment. Vous devrez donc le faire manuellement.

Supprimez le répertoire du composant (en supposant que vous n'ayez pas utilisé --flat), puis supprimez-le de la NgModule dans laquelle il est déclaré.

Si vous ne savez pas quoi faire, je suggère que vous ayez une application "propre", ce qui signifie qu'aucune modification git en cours. Générez ensuite un composant et voyez ce qui est modifié dans le référentiel afin de pouvoir revenir en arrière sur ce que vous devrez faire pour supprimer un composant.

Mettre à jour

Si vous ne faites que tester ce que vous souhaitez générer, vous pouvez utiliser l'indicateur --dry-run pour ne produire aucun fichier sur le disque. Il vous suffit de consulter la liste des fichiers mis à jour.

115
Brocco
  1. Supprimez le dossier contenant ce composant.
  2. Dans app.module.ts, supprimez l'instruction d'importation 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 dans index.ts.
92
Yakov Fain

Puisqu'il n'est pas encore supporté en utilisant CLI angulaire

voici donc le moyen possible. Avant cela, veuillez observer ce qui se passe lorsque vous créez un composant/service à l'aide de la CLI (ex. ng g c demoComponent).

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

alors faites-le dans l'ordre inverse

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

Actuellement, la CLI angulaire ne prend pas en charge une 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.
9
Bernardo Soriano

À l'aide de Visual Studio Code, supprimez le dossier du composant et voyez dans l'Explorateur de projet (côté gauche) les fichiers de couleur rouge qui signifie que les fichiers sont affectés et que des erreurs se produisent. Ouvrez chaque fichier et supprimez le code qui utilise le composant. 

5
babidi

J'ai écrit un script bash qui devrait automatiser le processus écrit par Yakov Fain ci-dessous. On peut l'appeler comme ./removeComponent myComponentName Ceci n'a été testé qu'avec 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
4
Aidan Grimshaw

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 et app.component.html des importations et des déclarations liées au composant que je voulais supprimer.
  • De même, j'ai effacé main.ts. 

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

2
TheMeanCoder

De app.module.ts:

  • effacer la ligne d'importation pour le composant spécifique;
  • efface 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é.

-

J'ai lu des gens qui disaient qu'il fallait l'effacer de main.ts. Vous n'étiez pas censé l'importer à partir de là car il importe déjà AppModule, et c'est AppModule qui importe tous les composants que vous avez créés.

1
cheddar

n'oubliez pas également de: - supprimer le chemin du composant du module de routage - rechercher le nom de classe du composant dans l'ensemble du projet

0
xx yy

Tout d’abord, supprimez le dossier du composant, que vous devez supprimer , Puis supprimez les entrées que vous avez créées dans les fichiers "ts".

0
the shashank

J'avais besoin de supprimer une directive Angular 6 dont le fichier de spécification était erroné. Même après la suppression des fichiers incriminés, la suppression de toutes les références et la reconstruction de l'application, TS signalait toujours la même erreur. Ce qui a fonctionné pour moi a été le redémarrage de Visual Studio - cela a effacé l'erreur et toutes les traces de l'ancienne directive non désirée.

0
T. Bulford

Réponse pour Angular 2+

Supprimez le composant from imports and declaration array de app.modules.ts.

Deuxième vérification, sa référence est ajoutée dans un autre module, si oui, supprimez-la et

enfin, delete that component Manually de l'application et vous avez terminé. 

Ou vous pouvez aussi le faire en sens inverse.

0
Deva

Si vous recherchez une commande dans l'interface de ligne de commande, Then et estNOpour l'instant ... .. Mais vous pouvez le faire manuellement en supprimant le dossier du composant et toutes les références.

0
Hidayt Rahman