Comment renommer un composant dans Angular CLI?
Existe-t-il un raccourci pour renommer un composant avec la CLI angulaire autre que l'édition manuelle de tous les fichiers du composant, tels que le nom du dossier, le fichier .css, le fichier .ts, le fichier spec.ts et le fichier app.module.ts?
Non!
Aucune commande ne modifiera le nom de tous les fichiers générés à l'aide de la commande composant create. Donc créé ts, html, css/scss, .spec.ts les fichiers doivent être renommés/modifiés manuellement.
Je suis un utilisateur fréquent de angular cli et je pense que c’est une bonne idée de commander car, à un moment donné, nous créons des composants angulaires et devons le renommer. Comme cette commande de changement de nom n’existe pas, il est vraiment pénible de supprimer le composant angulaire créé, la directive, etc., puis de réexécuter la commande pour créer le composant.
Actuellement, Angular CLI ne prend pas en charge la fonctionnalité de changement de nom ou de refactoring du code.
Vous pouvez obtenir une telle fonctionnalité avec l’aide de certains IDE.
Intellij, Eclipse, VSCode, etc. supporte par défaut le refactoring.
De nos jours, VSCode montre une tendance haussière, personnellement, je suis un fan de cette
Refactoring avec VSCode
Détermination de référence: - VS Code vous aide à trouver toutes les références d'une variable en sélectionnant variable et en appuyant sur le raccourci SHIFT + F12. Cela fonctionne incroyablement bien avec Type Script.
Renommer toutes les instances de référence: - Après avoir trouvé toutes les références, vous pouvez appuyer sur F2 pour ouvrir une fenêtre contextuelle; vous pouvez modifier la valeur et cliquer sur entrer pour mettre à jour toutes les instances de référence.
Renommer des fichiers et des importations Vous pouvez renommer un fichier et ses références d'importation à l'aide d'un plug-in. Plus de détails peuvent être trouvés ici
Avec les étapes ci-dessus après avoir renommé les variables et les fichiers, vous pouvez obtenir le renommage du composant angulaire.
MISES À JOUR: Pour renommer vos composants, vous pouvez utiliser: ng-rn
npm i ng-rn
Utilisation
cd /path/to/angular-project/
ng-rn old-button fancy-button
L'outil recherche les composants dans src/app /. Si vos composants sont situés dans un chemin plus complexe tel que src/app/my-vip-components, changez simplement de répertoire:
cd src/app/my-vip-components
ng-rn old-button fancy-button
Avant toute modification, effectuez vos sauvegardes :)
voir renommage angulaire
installer
npm install -g angular-rename
utilisation
$ ./angular-rename OldComponentName NewComponentName
Comme l'indiquait la première réponse, il n'existe actuellement aucun moyen de renommer des composants, nous ne parlons donc que de solutions de rechange!
Créez le nouveau composant que vous avez aimé.
ng générer le composant newName
Utilisez l'éditeur de code Visual studio ou tout autre éditeur pour déplacer facilement le code/les éléments côte à côte!
Sous Linux, utilisez grep & sed (rechercher et remplacer) pour rechercher/remplacer les références.
grep -ir "ancien nom"
cd votre dossier
sed -i '/ ancienNom/nouveauNom/g' *
Personnellement, je n'ai trouvé aucune commande pour la même chose. Créez simplement un nouveau composant (nom renommé) et copiez-collez les composants html, css et ts du composant précédent. Dans ts évidemment, le nom de la classe serait remplacé. C'est la méthode la plus sûre mais prend un peu de temps.