Créer un composant avec Angular CLI (ng generate component)

Dans cette recette, je vous montre comment utiliser la commande ng generate component de Angular CLI, ou son raccourci ng g c, pour créer rapidement un nouveau composant Angular dans votre projet.

Créer un composant : ng generate component ou ng g c

Supposons que je veuille créer un composant MeteoComponent.

J’ouvre un terminal, je me place à la racine du projet, et je tape la commande :

ng generate component meteo

Ou la syntaxe raccourcie équivalente :

ng g c meteo

Dans le répertoire src/app du projet, le CLI va créer un répertoire meteo qui contient 4 fichiers correspondant au composant :

/meteo
  meteo.component.ts       # Classe du composant
  meteo.component.html     # Template du composant
  meteo.component.css      # Styles CSS du composant
  meteo.component.spec.ts  # Tests unitaires du composant

Nous verrons dans un instant qu’on peut personnaliser l’emplacement du composant et les fichiers exacts qui sont créés, mais ceci est le comportement par défaut.

Par ailleurs, le CLI ajoute la classe du composant créé dans les declarations du module principal :

@NgModule({
  ...
  // MeteoComponent a été ajouté automatiquement par le CLI
  declarations: [ AppComponent, MeteoComponent ]
  ...
})
export class AppModule { }

Cela signifie que MeteoComponent peut être affiché dans n’importe quel autre composant du module AppModule. En effet, quand un composant est déclaré dans un module, il ne peut être affiché QUE dans ce module par défaut.

Conventions de nommage appliquées par le CLI

Quand vous créez un composant avec Angular CLI, ce dernier applique automatiquement quelques conventions de nommage :

  • Le suffixe Component est ajouté automatiquement au nom passé en paramètre. Il ne faut donc PAS écrire ng g c MeteoComponent, car cela créerait la classe MeteoComponentComponent.
  • Le préfixe app- est ajouté automatiquement au sélecteur du composant. Dans notre exemple, le sélecteur est donc app-meteo.
  • La classe du composant est automatiquement formatée en upper camel case. Exemple : la commande ng g c meteo crée une classe MeteoComponent.
  • Les fichiers du composant sont automatiquement convertis en dash-case et le type .component est ajouté. Exemple : la commande ng g c Meteo crée des fichiers meteo.component.XXX.

Personnaliser les fichiers créés par ng generate component

On a vu que par défaut la commande ng generate component, ou ng g c, crée un répertoire et quatre fichiers par composant. Il est possible de personnaliser ces comportements, soit en passant des flags à la commande ng g c, soit en modifiant le fichier angular.json du projet.

En passant des flags à la commande ng g c

Par exemple, la commande ci-dessous crée un composant MeteoComponent sans répertoire dédié (--flat=true) et sans tests unitaires (--spec=false).

ng g c meteo --flat=true --spec=false

Les flags ne sont actifs que pour la commande qui contient les flags. Ça veut dire que les futures commandes ng g c ne sont pas affectées, à moins de réutiliser les flags à chaque commande.

Pour plus d’infos, voir Créer un composant sans fichier .spec.ts ou .css ou .html avec ng generate component.

En modifiant le fichier angular.json du projet

Par exemple, la commande ci-dessous inscrit dans le fichier angular.json du projet qu’il ne faut pas générer de fichier .spec.ts pour les composants du projet.

ng config schematics.@schematics/angular:component.spec false

Avec cette technique, tous les futurs composants générés avec le CLI seront affectés et n’auront pas de fichier .spec.ts.

Pour plus d’infos, voir Personnaliser les fichiers créés par ng generate.

En modifiant l’emplacement du composant

Enfin, vous pouvez personnaliser l’emplacement où le composant est créé, en indiquant un chemin avant le nom du composant.

ng g c path/to/meteo

Le ou les répertoires du chemin seront créés s’ils n’existent pas déjà. Le chemin précisé est toujours relatif au répertoire src/app du projet. Ainsi, la commande précédente crée le composant au chemin src/app/path/to/meteo.

Pour plus d’infos, voir Créer un composant dans le bon répertoire, avec le bon nom.

Créer un composant manuellement ?

Rien ne vous empêche de créer vos composants Angular manuellement, en créant des fichiers analogues à ceux générés par le CLI. Ça n’a pas grand intérêt, puisque le CLI fait déjà ça très bien et qu’en plus on peut personnaliser son fonctionnement avec les techniques vues précédemment.

Si toutefois vous décidez de créer vos composants manuellement, n’oubliez pas :