image auteur
Lucas BENTO-VERSACE 2min • 01-09-2022

Angular - Renommer une directive

Angular - Renommer une directive

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 !)

Voici comment renommer une directive sous Angular.

Comme pour le renommage d'un composant, il n'y a pas de commande CLI qui permette de renommer une directive.

Vous êtes donc contraints d'utiliser une des 2 méthodes suivantes : le renommage manuel, ou le renommage via un plugin..

Renommer une directive manuellement

Renommer une directive manuellement est assez simple et rapide, car il n'y a que le fichier de la directive et le fichier de test à renommer. Egalement un chemin d'import a gérer : celui du fichier de test.

Etape 1 : Renommer les fichiers

Modifiez le nom de votre directive.ts et de votre directive.spec.ts.

La directive à renommer
La directive à renommer
Directive renommée
Directive renommée

Etape 2 : Renommer les imports dans le fichier de test et le module

Modifiez les imports dans les fichiers de tests et le module de déclaration de la directive (par défaut app.module.ts).

Votre éditeur de code vous proposera probablement de renommer ces imports automatiquement.

spec.ts
spec.ts
spec.ts modifié
spec.ts modifié

Etape 3 : Renommer le nom de classe et le selecteur

Il ne vous reste plus qu'à modifier le nom de la classe et le sélecteur de votre directive.

Pour modifier le nom de la classe, utilisez la fonctionner de renommage de votre éditeur de code (généralement F2). Pour le sélecteur, vous devrez surement utiliser un Search and Replace (ctrl + h), pour modifier toutes les utilisations de la directive.

Notez que modifier le sélecteur et ses utilisations est une étape facultative.

directive.ts
directive.ts
directive.ts modifié
directive.ts modifié

Renommer une directive via un plugin

Il existe un plugin VSCode permettant de renommer n'importe quel schéma Angular (composant, directive, service etc.). Plus d'infos dans cet article.

Conclusion

Vous pouvez désormais renommer vos directives. Si vous avez des questions, n'hésitez pas à nous contacter !

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