Retour au cours

Angular Schematics et Génération personnalisée

Le Développeur Angular Complet : de Zéro à Héros

71. Angular Schematics et Génération personnalisée

Angular Schematics est un outil de workflow utilisé pour générer, modifier et refactoriser du code à l'aide de templates et de règles. C'est le moteur qui alimente les commandes de l'Angular CLI comme ng generate component.

Que sont les Schematics ?

Les Schematics sont des ensembles d'instructions réutilisables. Ils lisent les métadonnées de votre espace de travail (ex : nom du projet, chemins de fichiers) et appliquent des règles de transformation au système de fichiers (ex : création de fichiers, mise à jour d' app.module.ts, ajout d'imports).

Utilisation des Schematics existants

Nous interagissons quotidiennement avec eux via le CLI :

  • ng generate component header
  • ng add @angular/material (Utilise le schematic ng add pour installer les dépendances et lancer les scripts de configuration).

Besoin de Schematics personnalisés

Dans les grandes organisations, les équipes ont souvent besoin de boilerplates personnalisés ou de patterns de code cohérents non couverts par le CLI standard. Les schematics personnalisés automatisent ces tâches répétitives.

Fonctionnement (Conceptuel)

  1. Règle (Rule) : Une fonction qui prend un arbre (système de fichiers virtuel) et renvoie un nouvel arbre.
  2. Arbre (Tree) : Une représentation du système de fichiers permettant aux Schematics de prévisualiser les changements.
  3. Source : Utilise des templates (souvent EJS ou Handlebars) pour définir la structure des fichiers générés.

Avantage : Garantit la cohérence, réduit l'erreur humaine et accélère massivement le développement de fonctionnalités.