Présentation de l'environnement de développement Node.js

1. Objectifs

   • Savoir ce qu'est Node.js et en quoi il diffère du JavaScript exécuté dans le navigateur
   • Comprendre pourquoi Node.js est indispensable pour développer avec Angular
   • Connaître l'architecture de Node.js : moteur V8, libuv et boucle d'événements
   • Utiliser npm pour installer et gérer les dépendances d'un projet
   • Vérifier l'installation de Node.js et exécuter un premier script

2. Présentation

   • Node.js est un environnement d'exécution JavaScript open source et multiplateforme. Il permet d'exécuter du JavaScript en dehors du navigateur: sur un ordinateur ou sur un serveur.
   • Il a été créé en 2009 par Ryan Dahl, qui a eu l'idée de sortir le moteur JavaScript V8 de Google Chrome pour l'utiliser directement sur le système. Le projet est aujourd'hui maintenu par l'OpenJS Foundation.
   • Node.js n'est ni un langage, ni un framework: le langage reste JavaScript. Node.js fournit le « moteur » qui l'exécute et des modules pour accéder aux fichiers, au réseau et au système.
   • Dans le navigateur, JavaScript sert à manipuler la page (document, window). Avec Node.js, il n'y a pas de page : on écrit des serveurs web, des scripts et des outils en ligne de commande.

1. Pourquoi Node.js pour développer avec Angular ?

   • Une application Angular s'exécute dans le navigateur. Pourtant, il est impossible de la développer sans Node.js, car tous les outils de développement Angular sont des programmes Node.js.
   • Node.js joue quatre rôles sur le poste du développeur :
     • npm: installe Angular, TypeScript, RxJS et toutes les bibliothèques dans le dossier node_modules/.
     • Angular CLI: la commande ng crée le projet et génère les composants, services, pipes…
     • Le serveur de développement: ng serve compile le code à chaque sauvegarde et sert l'application sur http://localhost:4200.
     • La compilation: ng build transforme le TypeScript en JavaScript optimisé, dans le dossier dist/.
   • Important : Node.js est nécessaire pour développer l'application, pas pour l'exécuter. En production, le contenu du dossier dist/ est publié sur un serveur web classique (Apache, Nginx) : ce sont de simples fichiers HTML, CSS et JavaScript.

1. L'architecture de Node.js

   • Node.js repose sur deux composants principaux :
     • Le moteur V8: développé par Google pour Chrome, il compile le JavaScript en code machine et l'exécute très rapidement.
     • La bibliothèque libuv: écrite en C, elle gère la boucle d'événements (event loop) et les entrées/sorties asynchrones: lecture de fichiers, requêtes réseau, minuteries…
   • Au-dessus, Node.js fournit des modules intégrés (fs, http, path, os, events…) qui donnent accès au système.
   • Votre code JavaScript s'exécute sur un seul thread. Quand une opération est longue (lire un fichier, attendre une réponse réseau), Node.js la confie à libuv et continue d'exécuter la suite du programme. Le résultat est traité plus tard grâce à une fonction de callback, une promesse ou async/await.
   • C'est le modèle non bloquant: il permet à Node.js de gérer de nombreuses opérations en même temps avec très peu de ressources.

• Exemple : lecture asynchrone d'un fichier (lecture.js)

const fs = require('fs');

console.log('1. Début du programme');

fs.readFile('message.txt', 'utf8', (erreur, contenu) => {
  if (erreur) {
    console.error('Lecture impossible :', erreur.message);
    return;
  }
  console.log('3. Contenu du fichier :', contenu);
});

console.log('2. Suite du programme');

• Créez un fichier message.txt à côté du script, puis exécutez node lecture.js. L'affichage est :

1. Début du programme
2. Suite du programme
3. Contenu du fichier : Bonjour depuis Node.js

• La ligne « 2 » s'affiche avant la ligne « 3 » : Node.js n'attend pas la fin de la lecture du fichier pour continuer. C'est exactement le même principe que les appels HTTP asynchrones que vous ferez plus tard dans Angular.

1. Les modules dans Node.js

   • Un module est un fichier JavaScript qui exporte des fonctions, des objets ou des classes réutilisables. On distingue :
     • Les modules intégrés: fournis avec Node.js (fs, http, path, os…), aucune installation nécessaire.
     • Les modules externes: téléchargés avec npm depuis le registre npmjs.com (dayjs, express, @angular/core…).
     • Vos propres modules: les fichiers de votre projet.
   • Node.js accepte deux syntaxes pour importer un module :

// Syntaxe CommonJS (historique de Node.js) - fichier .js
const path = require('path');
const os = require('os');

console.log(path.join('src', 'app', 'app.ts'));   // src/app/app.ts (ou src\app\app.ts sous Windows)
console.log('Système :', os.platform());

// Syntaxe ES Modules (standard ECMAScript) - fichier .mjs
// ou fichier .js avec "type": "module" dans package.json
import path from 'path';
import os from 'os';

console.log(path.join('src', 'app', 'app.ts'));
console.log('Système :', os.platform());

• Angular utilise la syntaxe import / export (ES Modules) dans tous ses fichiers TypeScript : c'est celle qu'il faut bien maîtriser.

1. npm, le gestionnaire de paquets

   • npm (Node Package Manager) est installé automatiquement avec Node.js. Il permet de télécharger, mettre à jour et supprimer les paquets (bibliothèques) dont un projet a besoin.
   • Les paquets proviennent du registre npmjs.com, le plus grand dépôt de bibliothèques open source au monde.
   • Trois éléments sont au cœur de chaque projet :
     • package.json: la carte d'identité du projet (nom, version, scripts) et la liste des dépendances.
     • node_modules/: le code des paquets installés. Il se recrée avec npm install: on ne le copie pas et on ne l'envoie jamais sur GitHub.
     • package-lock.json: les versions exactes installées, pour que chaque poste obtienne la même installation.

• Les commandes npm les plus utiles :

• Exemple : un package.json minimal

{
  "name": "decouverte-nodejs",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "dayjs": "^1.11.0"
  }
}

• Le symbole ^ devant un numéro de version autorise npm à installer les mises à jour mineures et les correctifs (1.11.x, 1.12.x…), mais pas une nouvelle version majeure (2.0.0), qui pourrait casser le code.

1. Les versions de Node.js

   • Une nouvelle version majeure de Node.js sort régulièrement. Il en existe deux types :
     • LTS (Long Term Support) : versions paires (22, 24…), stables et maintenues pendant environ trois ans. C'est celle qu'il faut installer.
     • Current: la version la plus récente, avec les dernières nouveautés, mais moins éprouvée.
   • Chaque version d'Angular exige une version de Node.js précise. Avant d'installer ou de mettre à jour, vérifiez le tableau de compatibilité officiel : angular.dev/reference/versions.
   • Si vous devez travailler sur plusieurs projets qui demandent des versions différentes, utilisez un gestionnaire de versions comme nvm-windows (Windows) ou nvm (Linux, macOS).

2. Vérifier l'installation

   • Node.js se télécharge sur le site officiel nodejs.org (choisir la version LTS). Les étapes détaillées sont dans la leçon suivante : Installation d'Angular.
   • Une fois Node.js installé, ouvrez un terminal (Invite de commandes, PowerShell ou le terminal de Visual Studio Code) et tapez :

node -v      # affiche la version de Node.js
npm -v       # affiche la version de npm
node         # ouvre la console interactive (REPL) ; .exit pour quitter

• Si la commande renvoie « 'node' n'est pas reconnu en tant que commande interne », Node.js n'est pas installé ou le terminal a été ouvert avant l'installation : fermez-le, rouvrez-le et réessayez.

1. Premier serveur web avec Node.js

   • Pour comprendre ce que fait ng serve, créons un mini serveur web avec le module intégré http.
   • Exemple : serveur.js

const http = require('http');

const serveur = http.createServer((requete, reponse) => {
  reponse.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
  reponse.end('<h1>Bonjour depuis Node.js</h1><p>Page demandée : ' + requete.url + '</p>');
});

serveur.listen(3000, () => {
  console.log('Serveur démarré sur http://localhost:3000');
});

• Lancez node serveur.js, puis ouvrez http://localhost:3000 dans le navigateur. Essayez aussi http://localhost:3000/contact.
• Le programme reste actif tant que le serveur tourne : arrêtez-le avec Ctrl + C.
• ng serve fonctionne sur le même principe : c'est un serveur Node.js qui envoie au navigateur votre application Angular compilée, sur le port 4200.

1. Application

   • Créez un dépôt vide decouverte-nodejs sur GitHub.
   • Sur votre poste, créez le projet et initialisez Git et npm :

mkdir decouverte-nodejs
cd decouverte-nodejs
git init
npm init -y
npm install dayjs

• Ouvrez le dossier dans Visual Studio Code et créez un fichier .gitignore contenant une seule ligne :

node_modules/

• Créez le fichier index.js:

const dayjs = require('dayjs');
const os = require('os');

console.log('Bonjour ' + os.userInfo().username + ' !');
console.log('Nous sommes le ' + dayjs().format('DD/MM/YYYY à HH:mm'));
console.log('Version de Node.js : ' + process.version);

• Dans package.json, ajoutez le script "start": "node index.js", puis exécutez npm start.
• Ajoutez le fichier serveur.js de la partie précédente et un script "serveur": "node serveur.js"; lancez-le avec npm run serveur.
• Envoyez votre travail sur GitHub :

git add .
git commit -m "Premier projet Node.js avec npm"
git branch -M main
git remote add origin https://github.com/VOTRE-COMPTE/decouverte-nodejs.git
git push -u origin main

• Sur GitHub, vérifiez que le dossier node_modules/ n'apparaît pas, mais que package.json et package-lock.json sont bien présents.
• Supprimez le dossier node_modules/ sur votre poste, lancez npm start (erreur : dayjs est introuvable), puis npm install et relancez : le projet fonctionne de nouveau. C'est ce que fera un camarade qui clone votre dépôt.

1. À retenir

   • Node.js exécute du JavaScript hors du navigateur grâce au moteur V8 et à libuv.
   • Son modèle est asynchrone et non bloquant: un seul thread, une boucle d'événements.
   • npm gère les dépendances : package.json les liste, node_modules/ les contient, package-lock.json fige leurs versions.
   • Angular CLI, ng serve et ng build sont des programmes Node.js : Node.js est obligatoire pour développer, mais pas pour héberger l'application compilée.
   • Installez toujours une version LTS compatible avec votre version d'Angular.

Node.js est l'atelier du développeur Angular : il fournit les outils pour construire l'application, mais l'application livrée n'en a plus besoin.