Comment renommer un composant dans Angular CLI ?

Question

Existe-t-il un raccourci pour renommer un composant avec le CLI d'Angular autre que la modification manuelle de tous les fichiers du composant tels que le nom du dossier, .css, .ts, spec.ts et app.module.ts ?

Answer 1

Non !

Il n'existe pas de commande permettant de modifier le nom de tous les fichiers générés à l'aide de la commande de création de composants. Ainsi, le composant créé ts , html , css/scss , .spec.ts Les fichiers doivent être renommés/édités manuellement.

Je suis un utilisateur fréquent de angular cli Je pense que cette commande serait très utile, car il arrive que l'on crée des composants angulaires et que l'on doive les renommer. Comme cette commande de renommage n'existe pas, supprimer le composant angulaire créé, la directive, etc. et relancer la commande pour créer le composant est vraiment pénible.

Voici le lien de discussion pour ajouter cette fonctionnalité renommer un composant angulaire

Answer 2

Actuellement, Angular CLI ne prend pas en charge la fonction de renommage ou de refactoring du code.

Vous pouvez réaliser cette fonctionnalité à l'aide de certains IDE.

Intellij, Eclipse, VSCode etc. ont un support par défaut pour le refactoring.

Aujourd'hui, VSCode montre une certaine tendance à la hausse, personnellement, je suis un fan de cela.

Refactoring avec VSCode

Détermination de la référence : - VS Code vous aide à trouver toutes les références d'une variable en sélectionnant la variable et en appuyant sur le raccourci. SHIFT + F12 . Cela fonctionne incroyablement bien avec le type script.

Renommer toutes les instances de la référence :- Après avoir trouvé toutes les références, vous pouvez appuyer sur F2 ouvrira une fenêtre popup et vous pourrez changer la valeur et cliquer sur entrer, ce qui mettra à jour toutes les instances de la référence.

Renommer les fichiers et les importations Vous pouvez renommer un fichier et ses références d'importation avec un plugin. 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 réaliser le renommage des composants angulaires.

Answer 3

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 comme src/app/my-vip-components, changez simplement de répertoire :

  cd src/app/my-vip-components
  ng-rn old-button fancy-button

Avant tout changement, faites vos sauvegardes :)

Answer 4

Personnellement, je n'ai pas trouvé de commande pour cela. Il suffit de créer un nouveau composant (dont le nom a été renommé) et de copier-coller les données du composant précédent. html , css et ts . Sur ts Le nom de la classe sera évidemment remplacé. C'est la méthode la plus sûre, mais elle prend un peu de temps.

Answer 5

Comme l'indique la première réponse, il n'y a actuellement aucun moyen de renommer les composants, donc nous parlons tous de solutions de contournement ! Voici ce que je fais :

1. Créez le nouveau composant que vous avez aimé.

   ng generate component newName

2. Utilisez l'éditeur de code Visual Studio ou tout autre éditeur pour déplacer commodément le code/les pièces côte à côte !

3. Sous Linux, utilisez grep & sed (find & replace) pour trouver/remplacer les références.

   grep -ir "oldname"

   cd votre dossier

   sed -i 's/ancienNom/nouveauNom/g' *