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

227

J'ai essayé d'utiliser "ng destroy component foo" et il me dit "La commande destroy n'est pas prise en charge par Angular-CLI"

Comment supprimer correctement les composants avec Angular CLI?

Jus10
la source
2
Il n'est pas encore pris en charge avec CLI, cependant si vous vous êtes assuré que les anciennes modifications sont validées par git avant de créer le composant, vous pouvez simplement supprimer les nouveaux fichiers et effectuer la vérification de git sur ceux modifiés (ou tout simplement git checkout src).
Sanjay Verma
C'est un hack intelligent. Cela fonctionne à coup sûr.L'équipe angulaire devra résoudre ce problème tôt ou tard. Je pense qu'ils sont actuellement occupés par d'autres problèmes. Mais je pense que pour l'instant nous devons vivre avec votre solution. Postez ceci comme réponse. @SanjayVerma
Aman

Réponses:

167

destroyou 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 ne l'avez pas utilisé --flat), puis supprimez-le de celui NgModuledans lequel il est déclaré.

Si vous ne savez pas quoi faire, je vous suggère d'avoir une application "propre" qui ne signifie aucun gitchangement en cours. Générez ensuite un composant et voyez ce qui est modifié dans le référentiel afin que vous puissiez revenir en arrière de ce que vous devrez faire pour supprimer un composant.

Mettre à jour

Si vous expérimentez simplement ce que vous voulez générer, vous pouvez utiliser l' --dry-runindicateur pour ne produire aucun fichier sur le disque, il suffit de voir la liste des fichiers mis à jour.

Brocco
la source
132
  1. Supprimez le dossier contenant ce composant.
  2. Dans app.module.ts, supprimez l'instruction d'importation de 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.
Yakov Fain
la source
12
où est index.ts? Merci
Shane G
40
dans les dernières versions de CLI, ils ne le génèrent pas.
Yakov Fain
7
Je pense qu'il manque encore une étape ... exécuter à nouveau le service, n'est-ce pas?
gsalgadotoledo
index.ts? Pas dans 5
Andrew Koper
2
dans Angular6, vous devez supprimer la déclaration d'importation de app-routing.module.ts
tyro
26

Puisqu'il n'est pas encore pris en charge en utilisant la CLI angulaire

voici donc la manière possible, avant cela, veuillez observer ce qui se passe lorsque vous créez un composant / service à l'aide de 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,tset un specfichier dédié à demoComponent.
  3. En outre, il ajoute une dépendance à l'intérieur du 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. Supprimez ce dossier de composants.

lors de la suppression de la dépendance, vous devez faire deux choses.

  1. Supprimez la référence de ligne d'importation du fichier app.module.ts.
  2. Supprimez la déclaration de composant du tableau de déclarations @NgModule dans app.module.ts.
UniCoder
la source
11

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

babidi
la source
11

Actuellement, la CLI angulaire ne prend pas en charge une option pour 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.
  3. Vous devez également supprimer la déclaration de composant du tableau de déclarations @NgModule dans le fichier app.module.ts
Bernardo Soriano
la source
5

J'ai écrit un script bash qui devrait automatiser le processus écrit par Yakov Fain ci-dessous. Il peut être appelé comme ./removeComponent myComponentName Cela 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
Aidan Grimshaw
la source
Veuillez ajouter une note pour que je change cela si le cli angulaire change à l'avenir
Aidan Grimshaw
3

Je ne sais pas si c'est la meilleure façon, mais cela a fonctionné pour moi.

  • Tout d'abord, j'ai supprimé le dossier des composants.
  • Ensuite, j'ai effacé app.module.ts, app.component.ts & app.component.html des importations et 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é.

TheMeanCoder
la source
3

Réponse pour Angular 2+

Supprimez le composant from imports and declaration arrayapp.modules.ts.

Vérifiez ensuite que sa référence est ajoutée dans un autre module, si oui, supprimez-la et

enfin delete that component Manuallydepuis l'application et vous avez terminé.

Ou vous pouvez également le faire dans l'ordre inverse.

Deva
la source
2

Depuis app.module.ts:

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

Ensuite , supprimez le dossier du composant que vous souhaitez supprimer et ses fichiers inclus ( .component.ts, .component.html, .component.csset .component.spec.ts).

Terminé.

-

J'ai lu des gens dire 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.

Cheddar
la source
2

J'ai dû supprimer une directive Angular 6 dont le fichier de spécifications était erroné. Même après avoir supprimé les fichiers incriminés, supprimé toutes les références et reconstruit l'application, TS signalait toujours la même erreur. Ce qui a fonctionné pour moi, c'était le redémarrage de Visual Studio - cela a effacé l'erreur et toutes les traces de l'ancienne directive indésirable.

T. Bulford
la source
0

Tout d'abord, supprimez le dossier des composants, que vous devez supprimer, puis supprimez ses entrées que vous avez faites dans les fichiers "ts".

le shashank
la source
0

Si vous recherchez une commande dans CLI, alors ans est NON pour l'instant. Mais vous pouvez le faire manuellement en supprimant le dossier des composants et toutes les références.

Hidayt Rahman
la source