Installation

Installation et création d'un premier projet Angular

Ce guide couvre tout ce qu'il faut pour passer de "rien n'est installé" à "j'ai une application Angular qui tourne dans le navigateur".

C'est quoi, à quoi ça sert, pourquoi ?

• C'est quoi ? L'ensemble des outils nécessaires pour développer avec Angular : Node.js (moteur JavaScript + gestionnaire de paquets npm) et Angular CLI (l'outil en ligne de commande officiel qui crée, lance et build les projets).
• À quoi ça sert ? À créer un projet Angular fonctionnel en quelques commandes, sans configurer manuellement les outils de compilation, de bundling et de serveur de développement.
• Pourquoi ? Sans cette base installée correctement, aucune des leçons suivantes n'est réalisable : tout le tutoriel part d'un projet généré par ng new et lancé avec ng serve.

Sommaire

1. Prérequis
2. Installer Node.js
3. Installer Angular CLI
4. Créer un nouveau projet
5. Structure du projet
6. Lancer le serveur de développement
7. Éditeur de code recommandé
8. Commandes CLI essentielles
9. Dépannage rapide

---

1. Prérequis

Avant de commencer, tu dois avoir des bases en HTML, CSS et JavaScript (les concepts TypeScript seront introduits au fil du wiki, pas besoin de les maîtriser à l'avance).

Outils nécessaires :

• Node.js (qui inclut npm, le gestionnaire de paquets)
• Angular CLI (l'outil en ligne de commande officiel d'Angular)
• Un éditeur de code (VS Code recommandé)
• Un terminal (PowerShell, Bash, etc.)

2. Installer Node.js

Angular nécessite une version de Node.js active ou LTS. Vérifie la compatibilité des versions sur angular.dev si besoin, mais en général la dernière version LTS convient.

Télécharger Node.js

Rends-toi sur nodejs.org et installe la version LTS.

Vérifier l'installation

node -v
npm -v

Ces deux commandes doivent afficher un numéro de version. Si ce n'est pas le cas, Node.js n'est pas correctement installé ou pas dans le PATH.

Astuce : si tu dois gérer plusieurs versions de Node.js selon tes projets, utilise un gestionnaire de versions comme nvm-windows (Windows) ou nvm (Mac/Linux).

3. Installer Angular CLI

Angular CLI (@angular/cli) est l'outil qui permet de créer, développer, tester et builder des projets Angular depuis le terminal.

npm install -g @angular/cli

Vérifie l'installation :

ng version

Tu devrais voir la version d'Angular CLI ainsi que des informations sur ton environnement (Node, package manager, OS).

4. Créer un nouveau projet

Place-toi dans le dossier où tu veux créer ton projet, puis lance :

ng new mon-premier-projet

La CLI va te poser quelques questions :

Question	Recommandation débutant
Which stylesheet format would you like to use?	CSS (ou SCSS si tu es à l'aise)
Do you want to enable Server-Side Rendering (SSR)?	Non, pour commencer

Une fois terminé, la CLI a :

• créé le dossier mon-premier-projet
• généré la structure d'un projet Angular standalone (composants autonomes, sans NgModules — c'est l'approche moderne par défaut depuis Angular 17+)
• installé toutes les dépendances npm

Déplace-toi ensuite dans le dossier :

cd mon-premier-projet

5. Structure du projet

mon-premier-projet/
├── src/
│   ├── app/
│   │   ├── app.ts               # Composant racine (logique)
│   │   ├── app.html             # Template du composant racine
│   │   ├── app.css              # Styles du composant racine
│   │   ├── app.config.ts        # Configuration de l'application (providers)
│   │   └── app.routes.ts        # Définition des routes
│   ├── index.html               # Page HTML hôte
│   ├── main.ts                  # Point d'entrée (bootstrap de l'application)
│   └── styles.css               # Styles globaux
├── angular.json                 # Configuration du workspace Angular
├── package.json                 # Dépendances npm et scripts
└── tsconfig.json                # Configuration TypeScript

Points clés à retenir :

• main.ts démarre l'application en appelant bootstrapApplication(App, appConfig).
• app.config.ts centralise les providers globaux (routeur, HTTP client, etc.).
• Chaque composant est composé d'au minimum un fichier .ts (classe + décorateur @Component) et généralement un template (.html) et une feuille de style (.css).

6. Lancer le serveur de développement

ng serve

Puis ouvre http://localhost:4200 dans ton navigateur.

Le serveur de développement recharge automatiquement la page à chaque modification de fichier sauvegardée (live reload).

Pour lancer sur un autre port :

ng serve --port 4201

Pour ouvrir automatiquement le navigateur :

ng serve --open

7. Éditeur de code recommandé

Visual Studio Code est l'éditeur recommandé pour Angular. Extensions utiles :

• Angular Language Service (officielle) — autocomplétion et vérification de types dans les templates HTML
• Prettier — formatage automatique du code
• ESLint — détection d'erreurs et de mauvaises pratiques

8. Commandes CLI essentielles

Commande	Rôle
ng new <nom>	Crée un nouveau projet
ng serve	Lance le serveur de développement
ng generate component <nom> (ou ng g c <nom>)	Génère un nouveau composant
ng generate service <nom> (ou ng g s <nom>)	Génère un nouveau service
ng build	Compile l'application pour la production (dossier dist/)
ng test	Lance les tests unitaires
ng add <paquet>	Ajoute et configure une librairie tierce (ex : ng add @angular/material)

9. Dépannage rapide

• ng n'est pas reconnu comme une commande : Angular CLI n'est pas installé globalement ou le dossier npm global n'est pas dans le PATH. Réinstalle avec npm install -g @angular/cli et redémarre le terminal.
• Erreurs de permissions npm (Mac/Linux) : évite sudo npm install -g, configure plutôt un répertoire npm global dans ton profil utilisateur.
• Le port 4200 est déjà utilisé : lance ng serve --port 4201 ou ferme le processus qui occupe le port.
• Incompatibilité de version Node/Angular : vérifie le tableau de compatibilité sur angular.dev/reference/versions et mets à jour Node.js si nécessaire.

---