Dans un précédent tutoriel, vous avez appris à installer Node.js et la commande npm qui va avec. Dans ce tutoriel, vous apprendrez à utiliser npm pour gérer les dépendances de votre projet Angular.

Qu’est-ce que NPM ?

npm est le gestionnaire de paquets officiels de Node.js. Il s’agit d’un outil en ligne de commande qui vous permet d’installer des paquets, c’est à dire des briques logicielles supplémentaires pour votre application (librairies, component, modules, etc…).

Installer un package

Il existe deux modes d’installation d’un paquet npm. Le mode global et le mode local.

Le mode global installera le paquet au niveau de votre système, et le paquet sera disponible pour tous vos projets. C’est par exemple le mode d’installation recommandé pour Anguar-CLI. Le mode local n’installera le paquet qu’au niveau du répertoire courant. Ce serait le cas d’une librairie de développement utilisée par votre projet, comme par exemple Material2, la libraire graphique.

La commande pour installer est simple : 

npm install --save nom_du_paquet

pour un mode local, et 

npm install -g nom_du_paquet

pour un mode global.

Cette commande aura deux effets. D’une part, elle ajoutera une ligne à votre fichier package.json qui constitue l’annuaire de vos packages, et d’autre part elle téléchargera votre package et ses éventuelles dépendances dans votre répertorie node_modules. Le package.json et le réertoire node_modules utilisés dépendent de votre mode d’installation. L’installation local utilisera le répertoire courant, alors que l’installation global utilisera le répertoire d’installation de Node.js (différent selon votre OS).

Mettre à jour les packages

Le gros intérêt d’un gestionnaire de paquets, c’est qu’il automatise la gestion des mises à jours. Pour mettre à jour un paquet du dossier courant, il suffit d’entrer 

npm update

et npm téléchargera automatiquement toute mise à jour disponible. Ici aussi, l’option -g permettrait de mettre à jour les paquets installés en global.

Attention cependant : on parle ici de briques qui vont venir compléter votre projet. Autant les mises à jour de sécurité sont les bienvenues, autant les modifications du fonctionnement d’une librairie externe peuvent casser le fonctionnement de votre application. Heureusement, npm impose une norme dans la construction de ses paquets, et notamment dans la gestion des numéros de version qui doivent être écrits sous la forme de 3 nombres séparés par des points, incrémentés dans l’ordre chronologique des sorties ( releases ), selon la raison de la mise à jour. C’est ce que l’on nomme le semantic versioning. Ainsi :

 

  • 2.0.0 est une distribution majeure, qui casse potentiellement votre application si elle prévoyait le fonctionnement avec la version 1.x.x.
  • 2.1.0 est une distribution mineure, qui ajoute des fonctionnalités à la distribution précédente.
  • 2.1.1 est une distribution patch qui corrige un bug dans la distribution précédente.

Les développeurs font de leur mieux pour qu’une mise à jour n’introduise pas une régression dans le code qui casserait un fonctionnement existant ( breaking change ) , mais il peut arriver que ce soit inévitable. Lisez toujours les commentaires de vos librairies avant de faire une mise à jour.

Un travail de forçat ?

Les équipes de développeur mettent à jour en permanence leurs paquets, et votre projet ne manquera pas d’en utiliser rapidement une à plusieurs dizaines. Il n’est pas envisageable que vous guettiez la moindre modification de code. Pour garantir le maintient en conditions opérationnelles de votre application, deux solutions s’offrent à vous.

  • 1. Vous pouvez verrouiller la nature des mises à jours que vous acceptez.

Dans votre package.json, la ligne de chaque paquet est suivie d’un numéro de version. Exemple : 

"@angular/cli": "1.1.0",

Ici, la version de Angular CLI est précisée « en dur ». Le projet utilise la version 1.1.0 qui ne sera pas mise à jour. Il serait plus logique d’accepter a minima les patchs. Pour cela, on modifiera en 

"@angular/cli": "~1.1.0",

.

Il se trouve que la librairie Angular CLI apporte régulièrement des mises à jours mineurs qui améliorent réellement son fonctionnement. Pour accepter les mises à jours automatiques en version mineures, modifiez la ligne en  

"@angular/cli": "^1.1.0",

.

Et si vous aimez la difficulté, vous pouvez accepter également automatiquement les mises à jours majeurs en modifiant votre ligne en 

"@angular/cli": "*",

. Mais vous aurez été prévenu : gare aux breaking changes.

  • 2. Vous pouvez (devriez…) écrire des tests unitaires.

Les tests unitaires sont des robots qui exécutent seuls des portions de votre code. Si une mise à jour casse son fonctionnement, vos tests ne manqueront pas de vous le signaler.