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 affichera la version installée de npm — un indicateur que celui-ci a été correctement installé et est prêt à l'emploi.

Installation de l'Angular CLI

Pour installer Angular CLI, ouvrir d'abord 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érifiez la version de l’Angular CLI en exécutant :

Cela affichera les informations de version pour l’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 à votre 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 afin d'ajouter la prise en charge de la syntaxe, l'autocomplétion et d'autres outils pour faciliter le développement Angular dans VS Code.