Présentation de la CLI Angular et ses commandes essentielles

Anatomie d'une commande

• Toutes les commandes de la CLI suivent la même structure : ng <commande> [schéma] [nom] [options].
• La plupart des commandes et des options ont une forme courte (alias) : generate devient g, component devient c, --dry-run devient -d.

• Pour obtenir de l'aide, ajoutez --help à n'importe quelle commande :

ng help                    # liste de toutes les commandes
ng new --help              # options de ng new
ng generate --help         # liste des schémas disponibles
ng generate component --help

1. ng new : créer un projet

   • ng new crée un dossier portant le nom du projet, y génère tous les fichiers, installe les dépendances avec npm et initialise un dépôt Git avec un premier commit.
   • La commande pose quelques questions : le format des styles (CSS, SCSS…) et l'activation du rendu côté serveur (SSR). Pour débuter, choisissez CSS et répondez No au SSR.

ng new ma-boutique

• On peut répondre aux questions directement avec des options, ce qui est pratique en séance :

ng new ma-boutique --style=css --ssr=false

• Les options les plus utiles de ng new:

• Attention : lancez ng new depuis le dossier qui doit contenir le projet (ex : C:\projets), jamais depuis l'intérieur d'un autre projet Angular. Toutes les autres commandes, au contraire, se lancent à la racine du projet, là où se trouve angular.json.

Activité 1 : créer le projet et le publier sur GitHub

• Dans le dossier C:\projets (ou celui de votre choix), créez le projet ma-boutique avec le style CSS et sans SSR.
• Testez d'abord la commande avec --dry-run: combien de fichiers seraient créés ? Le dossier existe-t-il après la commande ?
• Lancez la vraie commande, puis entrez dans le dossier avec cd ma-boutique.
• Vérifiez que Git est déjà initialisé avec git log --oneline: quel est le message du premier commit ?
• Créez un dépôt vide ma-boutique sur GitHub et envoyez-y le projet :

git branch -M main
git remote add origin https://github.com/VOTRE-COMPTE/ma-boutique.git
git push -u origin main

1. ng serve : lancer le serveur de développement

   • ng serve compile l'application en mémoire et la sert sur http://localhost:4200.
   • Le serveur surveille les fichiers: à chaque sauvegarde, il recompile uniquement ce qui a changé et recharge la page du navigateur.
   • Le terminal reste occupé tant que le serveur tourne : ouvrez un second terminal pour taper d'autres commandes. Arrêtez le serveur avec Ctrl + C.

ng serve           # lance le serveur
ng serve -o        # lance le serveur et ouvre le navigateur (--open)
ng serve --port 4300
npm start          # équivalent : le script "start" de package.json exécute ng serve

• Les options utiles de ng serve:

1. Activité 2 : observer le rechargement automatique

   • Lancez ng serve -o dans le projet ma-boutique.
   • Ouvrez src/app/app.html, remplacez tout son contenu par <h1>Ma boutique</h1> et enregistrez : observez le terminal et le navigateur.
   • Faites volontairement une erreur dans src/app/app.ts (supprimez une accolade) et enregistrez : où l'erreur s'affiche-t-elle ? Corrigez-la.
   • Arrêtez le serveur avec Ctrl + C, puis relancez-le sur le port 4300.
   • Faites un commit : git commit -am "Page d'accueil Ma boutique".

2. ng generate : générer des éléments

   • ng generate (forme courte ng g) crée les fichiers d'un élément Angular à partir d'un schéma (schematic), un modèle qui respecte les conventions officielles.
   • Le chemin indiqué est relatif au dossier src/app/. Les dossiers manquants sont créés automatiquement.

• Exemple : le composant généré par ng g c produits/liste (fichier src/app/produits/liste/liste.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-liste',
  imports: [],
  templateUrl: './liste.html',
  styleUrl: './liste.css'
})
export class Liste {

}

• Le sélecteur est formé du préfixe du projet (app) et du nom (liste). Pour l'afficher, ajoutez Liste dans les imports du composant parent, puis la balise <app-liste /> dans son template.
• Remarque : dans les versions d'Angular antérieures à la 20, les fichiers générés portent un suffixe (liste.component.ts, produit.service.ts) et les classes aussi (ListeComponent, ProduitService). Le principe est identique.
• Les options les plus utiles de ng generate:

# un petit composant tout-en-un, sans test
ng g c shared/badge -t -s --skip-tests

import { Component } from '@angular/core';

@Component({
  selector: 'app-badge',
  imports: [],
  template: `
    <p>
      badge works!
    </p>
  `,
  styles: ``
})
export class Badge {

}

1. Activité 3 : générer l'ossature de « Ma boutique »

   • Dans un second terminal (gardez ng serve actif dans le premier), générez avec la CLI :
     • l'interface models/produit;
     • le service services/produit;
     • les composants produits/liste et produits/detail;
     • le composant layout/entete en un seul fichier (template et styles intégrés) et sans test.
   • Avant chaque commande, testez-la avec --dry-run et vérifiez l'emplacement des fichiers.
   • Complétez l'interface Produit avec les propriétés id (number), nom (string), prix (number) et disponible (boolean).
   • Affichez <app-entete /> et <app-liste /> dans app.html (pensez aux imports du composant racine).
   • Faites un commit après chaque génération, puis poussez sur GitHub : git push.

2. ng build : compiler pour la publication

   • ng build compile l'application en mode production (configuration par défaut) : le code TypeScript est transformé en JavaScript, minifié, regroupé en quelques fichiers et débarrassé du code inutilisé.
   • Le résultat est placé dans le dossier dist/:

ng build

dist/
└── ma-boutique/
    └── browser/                  # contenu à publier sur le serveur web
        ├── index.html
        ├── main-XXXXXXXX.js      # le code de l'application (nom unique à chaque build)
        ├── styles-XXXXXXXX.css
        └── favicon.ico

• Les noms de fichiers contiennent une empreinte (hash) qui change à chaque modification : le navigateur ne garde jamais une ancienne version en cache.
• Le contenu de browser/ se publie sur Apache, Nginx ou tout hébergement web : Node.js n'est pas nécessaire sur le serveur.
• Options utiles :

1. Les autres commandes essentielles

   • ng test: exécute les tests unitaires (fichiers .spec.ts) et affiche les résultats. L'outil de test utilisé dépend de la version d'Angular et de la configuration du projet.
   • ng add: installe une bibliothèque et la configure automatiquement dans le projet (dépendances, styles, configuration). Exemple :

ng add @angular/material

• Différence avec npm install : npm install ne fait que télécharger le paquet. ng add le télécharge puis exécute son script d'installation, qui modifie les fichiers du projet. Il ne fonctionne qu'avec les bibliothèques prévues pour Angular. Pour Bootstrap, on utilise npm install bootstrap puis on déclare le CSS dans angular.json (voir Intégrer Bootstrap avec Angular).
• ng update: sans argument, liste les paquets Angular qui peuvent être mis à jour. Avec des arguments, met à jour Angular et migre automatiquement le code si la nouvelle version l'exige :

ng update                              # liste les mises à jour disponibles
ng update @angular/core @angular/cli   # met à jour Angular et la CLI du projet

• Conseil : faites un commit avant chaque ng update. En cas de problème, vous pourrez revenir en arrière avec Git.
• ng version (ng v) : affiche les versions installées. C'est la première information à donner quand on demande de l'aide.
• ng lint: analyse la qualité du code. Il faut d'abord ajouter un outil d'analyse avec ng add angular-eslint.

Où la CLI lit-elle sa configuration ?

• La CLI lit le fichier angular.json à la racine du projet. Il définit, pour chaque commande, l'outil utilisé (builder) et ses options : fichier d'entrée, styles globaux, dossier de sortie, configurations production et development.
• C'est pour cela que ng serve ou ng build échouent hors du dossier du projet : la CLI ne trouve pas angular.json.
• Le fichier package.json contient des raccourcis vers ces commandes :

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
}

• npm start et npm run build utilisent la version de la CLI installée dans le projet (node_modules), ce qui évite les écarts de version avec la CLI globale.

Erreurs fréquentes

Activité 5 : défi

• Sans regarder la leçon, retrouvez la commande qui :
  • crée un projet bibliotheque avec SCSS, sans SSR et avec le préfixe bib;
  • génère le composant livres/carte-livre sans fichier de test et avec un template intégré ;
  • simule la génération d'un pipe shared/majuscule sans créer de fichier ;
  • génère un guard core/admin;
  • lance le serveur sur le port 4500 et ouvre le navigateur ;
  • compile l'application pour une publication dans le sous-dossier /bibliotheque/.
• Exécutez vos commandes pour les vérifier, puis notez-les dans le fichier README.md du projet, rubrique « Commandes utilisées ».
• Poussez le projet bibliotheque sur GitHub et partagez le lien du dépôt.

À retenir

• Angular CLI est l'outil officiel, en ligne de commande, pour créer, générer, lancer, tester et compiler un projet Angular. Il s'utilise avec la commande ng.
• Une commande suit la structure ng <commande> [schéma] [nom] [options], et la plupart des éléments ont une forme courte.
• ng new se lance depuis le dossier parent ; toutes les autres commandes se lancent à la racine du projet, là où se trouve angular.json.
• ng serve sert l'application en développement sur le port 4200 ; ng build produit les fichiers à publier dans dist/.
• --dry-run permet de vérifier une commande avant de l'exécuter, et --help affiche toutes les options.

La CLI fait le travail répétitif à votre place : prenez l'habitude de générer chaque composant, service ou pipe avec ng generate plutôt que de créer les fichiers à la main.