Avant de commencer le développement avec Angular, il est nécessaire de configurer votre environnement de travail. Cela requiert trois outils essentiels : Node.js, Angular CLI et VS Code.

Installation de Node.js

1. Accéder au site officiel de Node.js site web;

2. Utiliser la version LTS (Long-Term Support) de Node.js au lieu de la version la plus récente, car Angular peut ne pas être encore totalement compatible avec la dernière version.

3. Sélectionner votre système d'exploitation—ici, macOS est choisi, mais sélectionner celui qui correspond à votre configuration. Laisser les autres paramètres inchangés;

4. Télécharger l'installateur et suivre les instructions à l'écran pour finaliser l'installation.

Une fois installé, ouvrez le terminal (ou invite de commandes) et vérifiez que Node.js est installé :

Si tout est correctement configuré, cette commande affichera la version de Node.js installée.

Ensuite, vérifiez que npm (Node Package Manager) est installé :

L’exécution de npm -v affiche la version installée de npm — une indication que l’installation a réussi et que l’outil est prêt à l’emploi.

Installation de l’Angular CLI

Pour installer Angular CLI, d’abord ouvrir le terminal (ou invite de commandes). Ensuite, exécuter la commande suivante pour installer Angular CLI globalement :

Cette commande installe Angular CLI globalement sur votre système, le rendant disponible pour tout projet Angular.

Une fois l’installation terminée, vérification de la version d’Angular CLI en exécutant :

Cela affiche les informations de version pour Angular CLI et les autres dépendances installées.

Installation de VS Code

1. Accéder au site officiel de VS Code ;

2. Sélectionner la version correspondant au système d'exploitation (Windows, macOS ou Linux) ;

3. Télécharger le programme d'installation et suivre les instructions à l'écran pour finaliser l'installation.

Une fois installé, ouvrir VS Code et configurer les extensions nécessaires :

1. Accéder à la section Extensions (Ctrl + Shift + X sous Windows ou Cmd + Shift + X sous macOS) ;

2. Installer l'extension Angular Language Service pour la mise en évidence du code et l'autocomplétion ;

3. Il est également possible d'installer Angular Essentials pour ajouter la prise en charge de la syntaxe, l'autocomplétion et d'autres outils facilitant le développement Angular dans VS Code.