De dossier vide à application en exécution : configuration d’un projet Angular 22 moderne

Afin de pouvoir apprendre les composants, les templates, les services ou le routage dans Angular, vous avez besoin d’un projet qui fonctionne réellement sur votre machine. Pour y parvenir, il faut plusieurs outils, une commande de génération de squelette ainsi qu’une structure de dossiers très différente de celle présentée dans de nombreux tutoriels anciens. Cette démarche vous guide d’une machine vierge jusqu’à une application Angular 22 en cours d’exécution, explique la fonction de chaque outil et montre comment les éléments générés se connectent afin que le reste du framework ait un endroit où s’installer.

Ce dont vous avez besoin avant de commencer

Une installation locale d’Angular repose sur quatre éléments : Node.js, le Angular CLI, un éditeur de code (Visual Studio Code est une option courante) et une terminal. Il n’est pas nécessaire d’installer TypeScript séparément ; la création d’un projet intègre automatiquement Angular, TypeScript ainsi que tous les autres paquets requis.

La compatibilité des versions est importante. Au moment de la rédaction, la liste de référence sur la compatibilité des versions d’Angular indique Node.js v22.22.3 ou une version ultérieure comme exigence minimale pour Angular 22, ainsi que des versions plus récentes prises en charge. Ces plages varient d’une version d’Angular à l’autre, il est donc conseillé de consulter le tableau de compatibilité actuel sur angular.dev avant d’installer quoi que ce soit.

Étape 1 : installer Node.js et npm

Angular permet de créer des applications pour navigateur, ce qui peut prêter à confusion quant à la nécessité d’un environnement de exécution côté serveur. La réponse réside dans les outils utilisés. Node.js permet à JavaScript de s’exécuter en dehors du navigateur, et l’Angular CLI, le compilateur, le serveur de développement ainsi que les outils de test sont tous des programmes JavaScript qui en ont besoin. Node.js inclut également npm, le gestionnaire de paquets que Angular utilise pour installer les dépendances de son projet.

Téléchargez un installateur depuis le site officiel de Node.js. Une fois la téléchargement terminé, ouvrez un terminal (ou l’invite de commandes sous Windows) et vérifiez que le runtime est présent dans votre chemin d’accès :

node --version

Le résultat doit être une chaîne de version ressemblant à ceci :

v22.22.3

Vérifiez ensuite que npm est également disponible :

npm --version

Si les deux commandes affichent un numéro de version, les bases sont en place. Résistez à l’envie de conserver la version ancienne de Node.js installée simplement parce qu’un tutoriel plus ancien fonctionnait avec elle. Chaque version majeure d’Angular a sa propre plage de versions de Node.js supportées, et un manque de compatibilité se manifeste généralement par des erreurs d’installation ou de compilation confuses plutôt que par un message clair. Des outils tels que nvm ou fnm facilitent le changement de version de Node.js par projet si vous en avez besoin de plusieurs.

Étape 2 : comprendre ce que fait le Angular CLI

Le prochain outil est le Angular CLI (Interface en ligne de commande). C’est le principal moyen de créer et de gérer des applications Angular : il crée les structures de nouveaux projets, génère des composants et des services, lance le serveur de développement, produit des versions prêtes pour la production, exécute des tests et gère de nombreuses autres tâches courantes. Au lieu d’écrire manuellement des dizaines de fichiers et de configurer vous-même la configuration de compilation, vous laissez le CLI créer un point de départ fonctionnel et conventionnel sur lequel vous pouvez ensuite construire.

Étape 3 : installer Angular CLI de manière globale

Installez le CLI avec npm :

npm install -g @angular/cli@22

Chaque partie de la commande a une fonction précise. npm install installe un paquet. Le flag -g l’installe de manière globale, ce qui permet d’utiliser la commande depuis n’importe quel dossier et non seulement à l’intérieur d’un projet. Le suffixe @22 fixe l’installation à la version majeure Angular 22, afin d’obtenir une CLI correspondant à la version du framework que vous souhaitez utiliser.

Lorsque l’installation est terminée, vérifiez-la :

ng version

Cela affiche des détails sur la CLI installée ainsi que les paquets associés. Notez que la commande n’est pas angular mais ng, l’exécutable que le paquet CLI place dans votre chemin d’exécution. Vous devrez l’utiliser fréquemment :

ng

Remarque pratique : une fois qu’un projet existe, son package.json contient également une copie locale de la CLI, et l’exécution de ng à l’intérieur du dossier du projet utilise cette version locale. L’installation globale sert principalement à permettre d’exécuter ng new avant même qu’un projet n’existante.

Étape 4 : créer votre première application

Allez dans le dossier où vous stockez vos projets, par exemple :

cd Desktop

Ensuite, demandez à la CLI de créer une nouvelle application :

ng new my-first-angular-app

Le dernier argument, my-first-angular-app, devient le nom du projet et du dossier ; n’importe quel nom valide convient. ng new est interactif, il peut donc poser quelques questions concernant la configuration du projet, comme le format de feuille de style à utiliser. Les messages exacts changent au fil de l’évolution d’Angular, alors ne soyez pas surpris si les vôtres diffèrent de ceux affichés sur une capture d’écran ou dans un guide plus ancien.

Pour un premier projet, il est judicieux d’accepter les paramètres par défaut recommandés. Ces derniers génèrent une application basée sur l’API autonome et utilisent la convention de nommage de fichiers plus courte et moderne que vous verrez bientôt. Lorsque la commande est terminée, un nouveau dossier apparaît :

my-first-angular-app/

Entrez-y :

cd my-first-angular-app

Étape 5 : se repérer dans les fichiers générés

Ouvrez le dossier dans votre éditeur. Un projet fraîchement généré ressemble à peu près à ceci :

my-first-angular-app/
│
├── .vscode/
│
├── node_modules/
│
├── public/
│
├── src/
│   ├── app/
│   │   ├── app.ts
│   │   ├── app.html
│   │   ├── app.css
│   │   └── app.spec.ts
│   │
│   ├── index.html
│   ├── main.ts
│   └── styles.css
│
├── angular.json
├── package.json
├── tsconfig.json
└── README.md

Présentation rapide des éléments les plus importants :

• src/main.ts est le point d’entrée qui lance l’application.
• src/index.html est la seule page HTML chargée par le navigateur ; Angular y affiche son contenu.
• src/styles.css contient les styles globaux applicables à toute l’application.

src/app/ contient le composant racine, divisé en app.ts (la classe TypeScript), app.html (son template), app.css (les styles spécifiques à ce composant) et app.spec.ts (son test unitaire).

public/ stocke les ressources statiques qui sont servies telles quelles.

angular.json configure la manière dont la CLI construit, sert et teste le projet.

package.json liste les dépendances et les scripts npm ; node_modules/ est l’endroit où npm les a installées.

tsconfig.json configure le compilateur TypeScript.

Vous n’avez pas besoin de comprendre chaque fichier pour l’instant. Savoir où se trouvent le point d’entrée, le composant racine et les configurations suffit pour commencer.

Étape 6 : lancer le serveur de développement

Dans le dossier du projet, lancez l’application :

ng serve

La CLI compile l’application et lance un serveur de développement local. Elle surveille également les fichiers sources et les recompile dès qu’un changement est effectué. Lorsque la compilation est terminée, vous verrez un résultat similaire à ceci :

Application bundle generation complete.
Local: http://localhost:4200/

Ouvrez cette adresse dans votre navigateur :

http://localhost:4200

La page de démarrage par défaut devrait apparaître. Si vous ne souhaitez pas taper l’URL à chaque fois, ajoutez le flag --open : la CLI lancera alors votre navigateur par défaut pour vous :

ng serve --open

Si le port 4200 est déjà occupé par un autre processus, vous pouvez choisir un autre port à l’aide de l’option --port.

Étape 7 : effectuer un changement et observer sa recompilation

Pour prouver que tout le cycle fonctionne, modifiez le template du composant racine :

src/app/app.html

Remplacez tout le contenu de ce fichier par un court fragment de markup :

<h1>Hello Angular 22!</h1>
<p>
  My first Angular application is running successfully.
</p>

Enregistrez, puis revenez au navigateur. La page se met à jour automatiquement. Comme le serveur de développement surveille vos fichiers et les recompile en cas de modification, les simples modifications du code source n’ont jamais besoin d’arrêter et de redémarrer ng serve. Les modifications des fichiers de configuration tels que angular.json constituent l’exception et nécessitent généralement un redémarrage.

Affichage des valeurs provenant de la classe du composant

Le markup statique n’est que la moitié de l’histoire. Ensuite, étendez le template afin qu’il affiche également des valeurs provenant du composant. Les doubles accolades courbes sont des placeholders que Angular remplit à partir de la classe :

<div class="container">
<h1>{{ title }}</h1>
  <p>{{ message }}</p>
  <h1>Hello Angular 22!</h1>
  <p>
    My first Angular application is running successfully.
  </p>
</div>

Pour que ces placeholders soient résolus, la classe du composant dans app.ts doit disposer de propriétés correspondantes. Le décorateur @Component indique à Angular que cette classe est un composant, le tag dans lequel il sera rendu (app-root, l’élément déjà présent dans index.html), ainsi que l’emplacement de son template et de ses styles :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  title = 'My First Angular 22 App';
  message = 'Angular project is running successfully!';
}

Lorsque les deux fichiers sont enregistrés, la page affiche le titre et le message de la classe au-dessus du contenu statique. Selon la version exacte de la CLI, le fichier app.ts généré peut présenter de légères différences (les templates plus récents utilisent parfois des signaux pour le titre), mais une propriété de classe simple comme celle-ci fonctionne de la même manière à des fins pédagogiques. Si vous souhaitez expérimenter avant d’installer quoi que ce soit, une version StackBlitz de cet exemple s’exécute entièrement dans le navigateur.

Comment les éléments se connectent au démarrage

Avec une application en cours d’exécution, il est utile de voir le chemin allant du navigateur jusqu’à votre template :

Browser
                   │
                   ▼
              index.html
                   │
                   ▼
                main.ts
                   │
                   ▼
              App Component
                   │
          ┌────────┴────────┐
          ▼                 ▼
       app.html          app.css
       (HTML)             (CSS)

Le navigateur charge index.html. Les scripts intégrés exécutent main.ts, le point d’entrée de l’application, qui initialise le composant racine. Ce composant associe sa classe à son template HTML ainsi qu’à ses styles, le rend dans l’élément app-root, et à partir de là Angular maintient l’interface utilisateur en synchronisation au fur et à mesure que les données du composant changent. Cette description est délibérément simplifiée, mais elle vous fournit une carte mentale à laquelle vous pourrez rattacher les sujets ultérieurs.

Un exemple minimal de liaison de données

Voici la version la plus concise et utile de cette idée. La classe du composant définit une seule propriété :

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  title = 'My First Angular App';
}

et le template fait référence à elle :

<h1>{{ title }}</h1>
<p>
  Welcome to my Angular 22 journey!
</p>

Deux lignes suffisent pour exprimer tout le concept. Dans la classe TypeScript, il y a une affectation de propriété :

title = 'My First Angular App';

et dans le template, il y a une expression d’interpolation :

{{ title }}

Angular lit la valeur depuis la classe et l’insère dans l’HTML rendu. Il s’agit d’interpolation, la forme la plus simple du liaison de données d’Angular. Si vous modifiez ultérieurement title en réponse à une entrée utilisateur ou à des données provenant d’un serveur, Angular met à jour la page pour vous. La liaison de propriétés, la liaison d’événements et la liaison bidirectionnelle s’appuient sur le même principe et méritent une étude approfondie.

Pourquoi les tutoriels plus anciens ont l’air différents

En cherchant des tutoriels sur Angular, vous trouverez rapidement des projets avec un layout différent. Un guide plus ancien montre généralement des fichiers tels que ceux-ci :

app.component.ts
app.component.html
app.component.css
app.module.ts

alors qu’un projet généré avec la CLI actuelle contient :

app.ts
app.html
app.css

Et souvent, il n’y a même pas de app.module.ts. Le framework a beaucoup évolué au fil des années. Angular moderne utilise par défaut des API autonomes : les composants déclarent eux-mêmes leurs dépendances directement, de sorte que les nouvelles applications ont rarement besoin d’un NgModule pour les regrouper. L’outil CLI actuel génère des applications autonomes et respecte par défaut les conventions de nommage plus récentes et plus courtes.

Cela ne rend pas le code plus ancien incorrect. De nombreuses applications en production utilisent encore des modules ainsi que des noms de fichiers .component.ts plus longs, et les deux styles sont pris en charge. Cependant, lors de l’apprentissage, mélanger ces deux approches est une source fréquente de confusion. Si un tutoriel vous demande d’éditer app.module.ts alors que votre projet n’en possède pas, vous êtes face au style plus ancien ; il convient alors de chercher un équivalent autonome plutôt que de créer manuellement ce fichier.

En résumé

Angular CLI transforme la configuration d’un projet en une routine courte et répétable. Une fois que vous l’avez effectuée une fois, tout le processus se déroule comme suit :

• Installez une version de Node.js compatible avec la version majeure d’Angular, puis vérifiez l’installation de node et npm.
• Installez la CLI avec npm install -g @angular/cli@22 et confirmez son installation avec ng version.

Créez un projet avec ng new, en acceptant les paramètres par défaut pour une première application.

Découvrez main.ts, index.html, les fichiers app.*, angular.json et package.json.

Exécutez ng serve (éventuellement avec --open) et profitez des recompilations automatiques pendant que vous modifiez le code.

Considérez les tutoriels basés sur NgModule et de style .component.ts comme une approche plus ancienne, et traduisez-les en API indépendantes.

Vous n’avez pas besoin de comprendre chaque fichier généré dès le premier jour. Ce qui compte, c’est d’avoir un projet Angular 22 fonctionnel et de savoir où se trouvent ses éléments principaux, ce qui constitue la base pour apprendre en profondeur les composants, les templates et le liage de données.

Lectures complémentaires