Renommer un composant via la CLI

Il n'existe malheureusement pas de commande permettant de modifier le nom d'un composant. Les fichiers doivent être renommés manuellement.

Il existe également des plugins VSCode pour ne pas avoir à le faire manuellement, plus de détails à la fin de cet article !

Renommer manuellement

Étape 1 : Renommer le dossier du composant et ses fichiers

C'est assez rébarbatif mais 1 par 1, renommez vos fichiers avec le même nom : .html, .ts .css ou .scss, .spec.ts. Veillez bien à ne pas faire de fautes.

Sans oublier le dossier. Veillez à ce que le dossier porte le même nom que les fichiers

Étape 2 : Renommer l'import et la déclaration dans le module

Maintenant, rendez-vous dans le fichier du module ou votre composant est déclaré (par défaut app.module.ts), et renommez l'import du component. Votre éditeur de code ou IDE devrait le souligner en rouge, puisque que vous avez déjà renommer le dossier et les fichiers du composant.

Étape 3 : Fichier typescript et spec

De manière facultative (mais recommandée), modifiez le selecteur dans le fichier .ts. De plus, il vous faudra mettre à jour toutes les occurences aux endroits où le composant est utilisé côté HTML.

1
2
3
4
5
@Component({
    selector: 'app-rename-component', // ICI
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

Il vous faudra aussi modifier toutes les occurences du nom de la classe du composant dans les fichiers .spec.ts. et modules Pour cela, je vous recommande d'utiliser la fonction de renommage de votre IDE (généralement F2), qui devrait remplacer automatiquement toutes les occurences du nom de la classe. Si ça ne fonctionne pas, utilisez Search and Replace (ctrl + h).

Renommer via un plugin

Comme promis, pour celles et ceux qui utilisent VSCode : vous pouvez ajouter un plugin (Rename Angular Component) qui permet de réaliser toutes les étapes pour vous : renommer tous les fichiers du composant, mettre à jour le fichier app.module.ts, la classe et le selecteur côté TS et HTML.

Plugin Rename Angular Component

Il vous suffit de faire un clic-droit sur n'importe quel fichier du composant et de sélectionner "Rename Angular Component".

Conclusion

Vous savez désormais renommer un composant Angular, malhreusement pour l'instant la CLI n'implémente pas cette fonctionnalité mais gardons bon espoir !

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