1. Installation de Node.js, NPM, Angular et VS Code

Retourner à : Angular en 2025

Dans ce premier chapitre de notre cours dédié à Angular 20, nous allons :

• voir un peu de vocabulaire
• installer npm et node
• installer Angular
• et pour finir on installera VS Code

Vocabulaire

Commencons par un peu de vocabulaire. Ici quelques termes à connaître pour pouvoir suivre le reste du cours:

Notez que TypeScript doit être trans-compilé en JavaScript pour pouvoir être interprété par les navigateurs.

Installer Npm et Node

Maintenant qu’on a posé les bases, il est temps d’ouvrir un nouveau terminal et de commencer l’installation de npm et node. Si vous êtes sous linux ou mac, vous pouvez suivre les instruction tel que je vais vous les montrer maintenant, pour ceux sous windows, je vous dirais dans un instant comment installer npm et node sur votre machine.

Linux et Mac

Donc commencons par ceux d’entre vous qui sont sous mac ou linux. Avant de pouvoir installer Node.js, on va avoir besoin de Curl, qui nous permettra de télécharger des fichiers via la ligne de commande. Donc si ce n’est pas déjà fait, installons Curl. Pour cela, on tape les lignes suivantes dans le terminal:

sudo apt update
sudo apt install curl

sudo apt update
sudo apt install curl

Une fois Curl installé, on va télécharger et installer Nvm (Node Version Manager) qui permet d’installer Node et de passer d’une version de Node.js à une autre très facilement. Pour cela on va utiliser les commande suivante:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc
nvm install --lts

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc
nvm install --lts

La ligne nvm install –lts va installer la dernière version LTS de Node et la version correspondante de NPM, qui est le gestionnaire de paquets de node. Pour vérifier la version précise de node qui a été installée, vous pouvez taper la commande suivante dans votre terminal:

node --version

node --version

Et pour vérifier la version de npm, vous pouvez utiliser la commande:

npm --version

npm --version

L’exécution de ces commandes devrait vous donner une résultat semblable à celui-ci:

Windows

Pour installer Node.js et NPM sous Windows, il va falloir vous rendre sur https://nodejs.org/en/download afin d’y télécharger l’installateur pour Windows:

Après avoir téléchargé l’installateur, vous n’avez plus qu’à l’exécuter et à suivre les étapes affichées à l’écran.

Une fois que l’installation est faite, vous pouvez vous ouvrir votre Terminal et vérifier que Node.js et NPM sont bien installés. Pour node tapez la commande suivante:

node --version

node --version

Et pour vérifier la version de npm, vous pouvez utiliser la commande:

npm --version

npm --version

Vous deviez maintenant voir des version supérieurs ou égales à celles-ci s’afficher dans votre terminal:

Test de l’installation de Node.js

Maintenant, vérifions que tout fonctionne comme prévu. Pour cela, on va créer un petit fichier javascript qu’on va exécuter avec node. Commençons par un simple « Hello World » ! Pour cela, vous pouvez prendre un éditeur de texte quelconque. Dans notre exemple, on va utiliser Nano en ligne de commande, mais libre à vous d’utiliser autre chose.

Commençons par créer un nouveau fichier « hello.js » avec nano:

nano hello.js

nano hello.js

Ensuite tapons le texte suivant:

console.log("Hello World !");

console.log("Hello World !");

Pour quitter et sauvegarder le fichier, il faut taper « Ctrl + X ». Ensuite nano demande si on veut sauvegarder le fichier, on tape “Y” et on confirme le nom du fichier en tapant « Entrer ». Il ne reste plus qu’à exécuter le fichier. Pour cela, il suffit de taper la commande suivante dans le terminal:

node hello.js

node hello.js

Et là, comme vous pouvez le constater, il y a bien la phrase “Hello world” qui s’affiche dans le terminal.

Avec Node, on peut aussi faire tourner des serveurs en local. Pour illustrer modifions le fichier hello.js :

nano hello.js

nano hello.js

Remplaçons le contenu du fichier avec :

const http = require('http');

http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World!');
}).listen(3000, 'localhost');

const http = require('http');

http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World!');
}).listen(3000, 'localhost');

Ces lignes de code créent un serveur, qui écoute à l’adresse http://localhost:3000, et qui retourne un code 200 ainsi que le texte “Hello world!”. Sauvegardons le fichier une nouvelle fois et exécutons le code :

node hello.js

node hello.js

Maintenant, si on ouvre un navigateur à l’adresse http://localhost:3000 on voit bien une page blanche avec le texte « Hello World! »:

Installation d’Angular

Nous pouvons maintenant passer à l’installation d’Angular. Pour cela, dans un terminal, on exécute la commande suivante:

npm install -g @angular/cli

npm install -g @angular/cli

Une fois Angular installé, on peut vérifier la version qui a été installée en tapant:

ng version

ng version

Dans notre exemple on voit qu’on a la version 20.3, mais tant que votre version est supérieur ou égale à la version 20.3, vous pourrez suivre la totalité ce cours.

Et voilà, nous avons maintenant une version d’Angular installée et prête à être utilisée. Dans le prochain chapitre, nous verrons comment créer un premier projet Angular.

Installation de VS Code

Une fois Angular installé, on peut passer à l’installation de VS Code. On aurait aussi pu utiliser un autre IDE, donc si vous voulez en utiliser un autre, n’hésitez pas. D’ailleurs, dans ce cours vous verrez aussi bien des copies d’écran de VS Code que de PyCharm.

Pour télécharger VS Code, il faut se rendre à l’adresse:

https://code.visualstudio.com/Download

Là, vous pouvez télécharger la version qui correspond à votre OS. Une fois l’installateur téléchargé, il suffit de l’exécuter, et de suivre les étapes de l’installation, comme pour tout autre programme.

Quand l’installation est terminée, vous pouvez ouvrir VS Code et avant de finir ce chapitre, je vous suggère d’installer au moins l’extension “Angular Language Service”. Pour cela, on va se rendre dans l’onglet extensions, et là on lance une recherche avec le mot « Angular », et l’extension “Angular Language Service” devrait être l’un des premiers résultats. 

On n’a plus qu’à cliquer sur « Install » et attendre la fin de l’installation.

Il y a pleins d’autres extensions qui peuvent grandement améliorer votre experience d’utilisation de VSCode, mais je vous laisse les découvrir par vous-même. 

Quiz

Répondez au quiz ci-dessous afin de vérifier que vous avez bien compris le contenu de cette leçon. Les quiz sont uniquement disponibles pour les abonnés Standard et Premium.