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 prise en charge par Angular-CLI"

Comment supprimer correctement les composants avec Angular CLI?

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.

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.

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.

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

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

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

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

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.

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.

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.

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

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.

Ce n'est pas pris en charge par Angular CLI et ils ne sont pas d'humeur à l'inclure de sitôt.

Voici le lien vers le problème réel créé - https://github.com/angular/angular-cli/issues/1776

Et une capture d'écran de la solution des officiels -