Comment renommer un composant dans Angular CLI?

178

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

angular angular-cli rename angular-components Thomas Easo
la source
1
Renommez simplement le sélecteur, si vous souhaitez modifier la balise html. Si vous voulez changer de classe, vous devez le faire manuellement.
Alaksandar Jesus Gene
Jusqu'à ce qu'ils ajoutent, ng destroyvous n'avez pas de chance ...
William Hampshire
4
Vous pouvez surveiller la fonctionnalité dans ce fil: github.com/angular/angular-cli/issues/900
Andrii Romanchak
rechercher et remplacer, renommer quelques fichiers / répertoires .... travail terminé
ldgorman

Réponses:

180

Non!

Il n'y a pas de commande qui changera le nom de tous les fichiers générés à l'aide de la commande de création du composant. Alors créé ts, html, css/scss, les .spec.ts fichiers doivent être renommés / modifié manuellement.

Je suis un utilisateur fréquent de angular cliet je pense que ce serait une commande agréable, car nous créons juste des composants angulaires et devons les renommer. Comme cette commande de changement de nom n'est pas là, supprimer le composant angulaire créé, la directive, etc. et exécuter à nouveau la commande pour créer le composant est vraiment pénible.

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

Aniruddha Das
la source
6
Cela serait également pratique pour réutiliser d'anciens projets.
Leo
1
Les nouveaux WebStorm 2018.1.2mots permettent de renommer le composant mais ne l'ont jamais utilisé. essaiera plus tard un jour
Aniruddha Das
2
Dans VSCode par exemple, en cas de problème (fichier importé qui n'existe pas, composant non existant, etc.), vous pouvez voir des indications d'erreur dans le volet de l'explorateur de fichiers sur la gauche. Donc, dans mon cas, j'avais besoin de renommer un composant, j'ai simplement renommé son dossier et ses noms de fichier internes, puis j'ai juste suivi toutes les indications d'erreur, en modifiant le nom de ce composant en conséquence. Je suppose que cette fonctionnalité existe également dans d'autres IDE modernes de nos jours ... Mais avoir une commande angular-cli qui le fait automatiquement (un peu comme "ng gc ...") serait génial, cependant! Bon codage! :)
TheCuBeMan
1
Il y a une discussion sur cette fonctionnalité depuis 2016 à propos de cette fonctionnalité: github.com/angular/angular-cli/issues/900 Toutes les demandes pour une telle fonctionnalité sont liées à ce fil et fermées. @AniruddhaDas pourriez-vous ajouter ceci à la réponse?
Stefan
1
@Stefan ajouté maintenant. voir si cela vous convient, n'hésitez pas à modifier également.
Aniruddha Das
48

Actuellement, Angular CLI ne prend pas en charge la fonctionnalité de renommer ou de refactoriser le code.

Vous pouvez obtenir une telle fonctionnalité à l'aide de certains IDE.

Intellij, Eclipse, VSCode etc. a le support par défaut du refactoring.

De nos jours, VSCode montre une tendance à la hausse, personnellement, je suis 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 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 sur lesquelles vous pouvez appuyer F2, vous ouvrirez une fenêtre contextuelle et vous pourrez changer la valeur et cliquer sur Entrée, cela mettra à jour toutes les instances de 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

entrez la description de l'image ici

Avec les étapes ci-dessus après avoir renommé les variables et les fichiers, vous pouvez renommer le composant angulaire.

samuelj90
la source
3
Vous parlez de références, de fichiers et d'importations, mais qu'en est-il du changement de nom des composants?
Ortomala Lokni
1
@OrtomalaLokni angular-cli ne prend pas en charge le changement de nom. La tâche de renommer peut être accomplie avec ces trois étapes.
samuelj90
1

voir angular-rename

installer

npm install -g angular-rename

utilisation 

$ ./angular-rename OldComponentName NewComponentName
emrhzc
la source
1
Le référentiel Github n'existe plus
Emmanuel
le pire des composants evet ... pas de documentation appropriée, plein de bugs ... belle idée ... mais inutile
DS_web_developer
1

Alors que l'OP demande une commande CLI, certaines des réponses se concentrent sur les IDE. Dans cette réponse, je confirme simplement que le WebStorm / IntelliJ actuel permet de renommer le composant. Il suffit de tenter de renommer la classe dans le .tsfichier. Vous serez présenté avec:

entrez la description de l'image ici

et le changement de nom sera effectué dans tous les endroits pertinents.

P Marecki
la source
Cela a été signalé pour la première fois dans le fil actuel par @Aniruddha Das
P Marecki
0

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

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

    ng générer le composant newName

  2. Utilisez l'éditeur de code Visual Studio ou tout autre éditeur pour déplacer facilement le code / les éléments côte à côte!

  3. Sous Linux, utilisez grep & sed (rechercher et remplacer) pour rechercher / remplacer les références.

    grep -ir "ancien nom"

    cd votre dossier

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

salah-1
la source
0

Personnellement, je n'ai trouvé aucune commande pour le même. Il suffit de faire un nouveau composant (nom renommé) et copier - coller les années précédentes composantes html, csset ts. De tstoute évidence, le nom de la classe serait remplacé. C'est la méthode la plus sûre mais prend un peu de temps.

Priyanka Arora
la source
0

Dans WebStorm, vous pouvez faire un clic droit → Refactoriser → Renommer sur le nom du composant dans le fichier TypeScript et cela changera le nom partout.

Ollie
la source