Installer Angular CLI

Angular CLI (Command Line Interface) est ta forge - un outil pour créer, construire et gérer des projets Angular.

Prérequis

Avant l'installation, tu as besoin de :

• Node.js dans la version LTS actuelle (22.12 ou plus récente ; la dernière version d'Angular CLI ne fonctionne plus avec Node.js 18)
• npm (installé avec Node.js)

Vérifie les versions :

1node --version
2# Doit afficher v22.12.0 ou plus récent
3
4npm --version
5# Doit afficher 10.x ou plus récent

Installer Angular CLI

Ouvre le terminal et tape :

1npm install -g @angular/cli

L'option -g signifie une installation globale - le CLI sera disponible depuis n'importe où dans le système.

Vérifier l'installation

1ng version

Tu devrais voir des informations sur la version d'Angular CLI installée, ainsi que sur les versions de Node.js et TypeScript prises en charge.

Créer ton premier projet

1# Crée un nouveau projet
2ng new my-dojo
3
4# Le CLI va demander :
5# ? Which stylesheet format would you like to use? (CSS, SCSS, Sass, Less)
6# ? Do you want to enable Server-Side Rendering (SSR)? (y/N)

Réponses recommandées pour les débutants :

• Stylesheet : SCSS (plus de flexibilité)
• SSR : Non (on n'en a pas besoin au début)

Structure du projet

Après avoir créé le projet, tu verras :

1my-dojo/
2├── src/
3│   ├── app/
4│   │   ├── app.component.ts      # Composant principal
5│   │   ├── app.component.html    # Template
6│   │   ├── app.component.scss    # Styles
7│   │   ├── app.config.ts         # Configuration
8│   │   └── app.routes.ts         # Routage
9│   ├── index.html                # Fichier HTML principal
10│   ├── main.ts                   # Point d'entrée
11│   └── styles.scss               # Styles globaux
12├── angular.json                  # Configuration du projet
13├── package.json                  # Dépendances npm
14└── tsconfig.json                 # Configuration TypeScript

Remarque : depuis Angular 20, le CLI crée des fichiers sans le suffixe .component - au lieu de app.component.ts, tu verras app.ts avec la classe App, et app.html au lieu de app.component.html. Les fichiers jouent le même rôle.

Lancer l'application

1cd my-dojo
2ng serve

L'application sera disponible à l'adresse : http://localhost:4200

Options utiles :

1ng serve --open          # Ouvre automatiquement le navigateur
2ng serve --port 3000     # Change le port
3ng serve --watch         # Rechargement automatique (activé par défaut)