Créer un composant dans le bon répertoire, avec le bon nom

Comment créer dès le départ les composants qui vont bien avec le CLI, et gérer ensuite leur refactorisation au fil du développement.

Créer un composant dans le bon répertoire

Le CLI ne propose pas de commande pour déplacer un composant. Le mieux est donc de le créer au bon emplacement dès le départ.

Il faut être à la racine du projet pour exécuter la commande ng g c, mais on peut indiquer le chemin où le composant doit être créé :

ng g c foo/bar/meteo

Le CLI crée le composant dans un dossier src/app/foo/bar/meteo au lieu de src/app/meteo.

Si le chemin du composant correspond au chemin d’un module Angular (NgModule), le composant y sera automatiquement rattaché. Supposons qu’on ait un SharedModule dans le répertoire src/app/shared et qu’on lance la commande suivante :

ng g c shared/meteo

Cela va créer MeteoComponent dans le répertoire src/app/shared ET ajouter MeteoComponent aux déclarations de SharedModule.

Un syntaxe alternative pour déclarer un composant dans un module précis est d’utiliser le flag --module NOM_MODULE, où NOM_MODULE est le nom du module où déclarer le composant (sans le suffixe “Module”).

# Le composant est créé à la racine (`src/app`) et rattaché à SharedModule
ng g c meteo --module shared
ng g c meteo -m shared

Pour plus d’infos sur les différentes syntaxes supportées par la commande ng g c, voir Créer un composant avec Angular CLI (ng generate component).

Créer un composant avec le bon nom

Le CLI ne propose pas de commande pour renommer un composant. Le mieux est donc de trouver le bon nom dès le départ.

La commande ng generate component (ou son raccourci ng g c) ajoute automatiquement le suffixe “Component” au nom que vous lui passez. Pour les composants dont le nom se compose de plusieurs mots, vous pouvez utiliser la notation PascalCase (QuizQuestion) ou dash-case (quiz-question).

Commande Classe créée Fichier créé
ng g c quiz QuizComponent quiz.component.ts
ng g c QuizQuestion QuizQuestionComponent quiz-question.component.ts
ng g c quiz-question QuizQuestionComponent quiz-question.component.ts