image auteur
Lucas BENTO-VERSACE 2min • 25-02-2022

Angular - Comment supprimer un composant

Angular - Comment supprimer un composant

Bienvenue sur CodeWise ! Si vous êtes nouveau ici, vous voudrez sans doute découvrir notre Starter Kit Angular : il contient une roadmap du parcours d'un dev Angular, ainsi qu'un cookbook des commandes les plus utiles et un extrait de formation. Cliquez ici pour le télécharger (c’est gratuit !)

Dans cet article, découvrez comment supprimer un composant de manière safe avec Angular.

On peut pas juste supprimer le dossier ?

Si vous vous contentez de supprimer le dossier d'un composant de votre application, une erreur apparaît dans votre console :

angular error cannot find module
Erreur Cannot find module

En effet, quand vous avez fait générer votre composant, il a été ajouté aux imports du module principal de votre application.

Maintenant qu'on veut supprimer le composant, cette déclaration nous pose problème.

Alors comment faire ?

Supprimer via La CLI ?

Malheureusement, il n'y a pas de commande pour supprimer un composant via la CLI et cette évolution n'est pas prévue dans les versions à venir pour l'instant.

La solution

Etape 1 : Supprimer les appels au composant

Premièrement, veillez à ce que votre composant ne soit appelé dans aucun template HTML via une balise <app-mon-composant>.

Si votre composant est appelé via sa balise, supprimez l'appel en effaçant la balise.

Etape 2 : Supprimer le dossier

Dans un premier temps, il faut supprimer le dossier du composant.

angular architecture projet
Architecture du projet

Clic droit sur le dossier en question et sélectionner "Supprimer".

angular supprimer dossier composant
Supprimer le dossier

Mais si vous relancez la commande ng serve tout de suite, l'erreur citée plus haut se déclenche.

Voyons donc comment la corriger.

Etape 3 : Retirer la déclaration du module

Une fois le dossier supprimé, il vous reste une chose à faire encore si non le serveur vous affiche toujours cette erreur Cannot find module .

Il va falloir retirer deux lignes dans le fichier app.module.ts, l'import du composant en question et sa déclaration dans les import du @NgModule :

angular app.module.ts
app.module.ts

Une fois que le composant n'est plus dans les imports du module, il n'essayera plus de se charger. Donc, vous n'aurez plus l'erreur.

Conclusion

Vous savez désormais supprimer un composant dans Angular !

N’hésitez pas à laisser un commentaire, en espérant que cela vous a plu.

Sources

Téléchargez votre Starter Kit Angular

Starter Kit Angular

En souscrivant vous recevrez :

  • Une roadmap d'un développeur Angular
  • Un cookbook Angular des commandes les plus utiles
  • Un extrait de formation

100% gratuit.

Auteur

image auteur
Lucas BENTO-VERSACE Alternant chez Codewise / Étudiant en développement web lucas.bentoversace@ynov.com
"Alternant chez Codewise, passioné par l'informatique et les technologies depuis mon plus jeune âge. J'ai découvert le monde du web et depuis je ne m'en lasse pas ! Fan de jeux vidéos, de sports et de musiques. "