Créer un composant avec Angular CLI (ng g c)

La commande ng generate component du CLI permet de créer rapidement un nouveau composant dans un projet Angular. Voyons sa syntaxe en détail.

Créer un composant

Pour créer un composant MeteoComponent, on exécutera la commande :

ng generate component meteo
ng g c meteo                 # Syntaxe raccourcie équivalente

Il ne faut pas inclure le suffixe Component, qui est ajouté automatiquement par le CLI.

ng g c MeteoComponent   # NON, cela créerait `MeteoComponentComponent`

Dans la configuration par défaut du CLI, quatre fichiers sont générés dans un répertoire dédié 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

Par ailleurs le CLI ajoute le composant créé dans les declarations du module en cours :

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

Créer un composant dans un répertoire/module précis

Vous pouvez préciser le chemin où le composant doit être créé (ce chemin est alors relatif à src/app) :

ng g c rep1/rep2/meteo

Si le répertoire dans lequel le composant est créé contient un *.module.ts, alors le composant est ajouté aux declarations de ce module, et non à celles de AppModule.

Ainsi, en supposant l’arborescence suivante :

/app
  /shared
    shared.module.ts  // Contient SharedModule
    ...
  app.component.html
  app.component.ts
  ...

La commande suivante créerait un composant MeteoComponent qui serait ajouté aux declarations de SharedModule :

ng g c shared/meteo

On peut aussi explicitement passer le nom du module dans lequel le composant doit être déclaré avec le flag -m :

# Passer le nom du module sans le suffixe "Module" : shared --> SharedModule
ng g c meteo -m shared

Personnaliser les fichiers générés par le CLI

Vous pouvez personnaliser les fichiers générés par la commande ng generate component grâce aux flags suivants :

  • flat : Si true, le CLI ne crée pas de répertoire dédié au composant. Valeur par défaut : false.
  • inline-style : Si true, les styles CSS du composant sont placés directement dans le fichier .ts et le fichier .css n’est pas créé. Valeur par défaut : false.
  • inline-template : Si true, le template du composant est placé directement dans le fichier .ts et le fichier .html n’est pas créé. Valeur par défaut : false.
  • spec : Si true, un fichier .spec.ts est généré pour les tests unitaires du composant. Valeur par défaut : true.

Ces flags peuvent être utilisés en ligne de commande, ils affectent alors uniquement cette commande :

# Crée un composant sans répertoire dédié et sans tests unitaires
ng g c meteo --flat=true --spec=false

Ces flags peuvent également être définis dans le fichier .angular-cli.json, auquel cas ils affectent toutes les commandes ng g c :

"defaults": {
  ...
  "component": {
    "spec": false,
    "inlineStyle": true
  },
  ...
}

Notez que les flags passent en notation camelCase dans le fichier .json, au lieu de dash-case. Par exemple, inline-style devient inlineStyle.

D’autres flags que ceux documentés ici sont supportés. Voir la documentation de ng generate component.

Informations

Tags : componentscli

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne