Créer un composant sans fichier .spec.ts ou .css ou .html avec ng generate component

Par défaut, la commande ng generate component crée un répertoire et quatre fichiers par composant. Comment éviter de générer ces quatre fichiers à chaque fois.

Fichiers générés par défaut par ng generate component

Par défaut, la commande ng generate component crée un répertoire et quatre fichiers par composant.

Si on exécute :

ng g c meteo

On obtient :

/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

Omettre des fichiers grâce à ng g c --flag...

Il est possible d’omettre certains des fichiers générés par défaut en passant des flags à la commande ng g c.

Voici les flags les plus fréquents.

# Composant sans fichier .spec.ts (tests unitaires)
ng g c meteo --spec=false

# Composant sans fichier .css
ng g c meteo --inline-style=true

# Composant sans fichier .html
ng g c meteo --inline-template=true

# Composant sans répertoire dédié
ng g c meteo --flat=true

Les flags peuvent bien sûr être combinés :

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

Omettre des fichiers grâce à angular.json

On peut inscrire la valeur des flags dans le fichier angular.json du projet. Toutes les commandes ng g c exécutées APRÈS la modification de angular.json seront affectées par les nouveaux flags.

Le fichier angular.json peut être édité manuellement, mais la commande ng config permet de faire les modifications en minimisant les risques d’erreur.

# Pas de fichier .spec.ts pour tous les futurs composants du projet
ng config schematics.@schematics/angular:component.spec false

# Pas de fichier .css pour tous les futurs composants du projet
ng config schematics.@schematics/angular:component.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.

Une fois le fichier angular.json modifié, il n’est plus nécessaire de passer les flags à la commande ng g c. Les réglages mémorisés dans le fichier sont utilisés automatiquement.

# Composant sans fichier .spec.ts et sans fichier .css, basé sur angular.json
ng g c meteo