Si vous avez déjà tenté de mettre à jour un projet Angular après plusieurs mois (ou années) sans toucher aux dépendances, vous savez de quoi je parle : conflits de versions, erreurs mystérieuses, et frustration garantie. Trois commandes npm permettent de ne pas y passer des heures (ou des jours).
1. Comprendre l’état de vos dépendances avec npm outdated
La première étape consiste à savoir où vous en êtes. La commande :
npm outdated
vous donne un aperçu complet des dépendances de votre projet. Elle affiche quatre colonnes essentielles :
- Current : la version installée sur votre projet.
- Wanted : la version souhaitée par vos autres dépendances (transitives).
- Latest : la dernière version disponible sur le registre npm.
- Location / Depended by : où la librairie est installée et par qui elle est utilisée.
Les dépendances nécessitant une mise à jour apparaissent souvent en rouge, ce qui permet de visualiser rapidement ce qui doit être corrigé.
Exemple de sortie partielle :
Package Current Wanted Latest
@angular/core 19.2.15 19.2.15 20.3.1
@angular/cli 19.2.17 19.2.17 20.3.2
marked 15.0.12 15.0.12 16.3.0
ngx-markdown 19.1.1 19.1.1 20.1.0
Ici, vous voyez clairement que @angular/core et @angular/cli ont des mises à jour majeures disponibles.
2. Identifier qui dépend de quoi avec npm list
Une fois que vous savez quelles versions sont disponibles, il est important de comprendre qui dépend de quoi. La commande :
npm list <library>
affiche toutes les librairies de votre projet qui utilisent la librairie spécifiée. Cela permet d’identifier rapidement les conflits de versions.
Exemple pour marked :
bartleby@4.0.2
├─┬ bartleby@4.0.2 -> .\
│ └── marked@15.0.12 deduped
├── marked@15.0.12
└─┬ ngx-markdown@19.1.1
└── marked@15.0.12 deduped
Ici, la librairie ngx-markdown introduit une dépendance transivite vers marked. Pas de problème dans cete exemple, la version souhaitée correspond à la dépendance définie au niveau de l’application. Mais cela peut poser problème si une autre librairie exige une version différente. Comprendre ces relations est clé pour résoudre les conflits.
3. Vérifier les dépendances d’une librairie avec npm info
Enfin, pour anticiper les conflits, vous pouvez connaître les dépendances exactes d’une librairie avec :
npm info <library> dependencies
Cette commande liste toutes les dépendances et les versions minimales ou exactes requises par la librairie. Par exemple, si XA dépend de Z@^1.2.0 et W@^3.4.0, vous savez immédiatement si une mise à jour risque de casser votre projet.
4. Processus pour mettre à jour Angular
Avec ces trois outils, vous pouvez alors entamer un processus de « Rinse and Repeat” :
- Identifier toutes les dépendances critiques (
npm outdated). - Vérifier les dépendances croisées (
npm listetnpm info). - Mettre à jour Angular étape par étape avec :
ng update
- Résoudre chaque conflit de dépendances au fur et à mesure en ajustant les versions pour qu’elles soient ni trop récentes, ni trop anciennes.
- Recommencer jusqu’à ce qu’il n’y ait plus de conflits
La clé est de ne pas se précipiter : les mises à jour majeures déclenchent souvent des erreurs de compilation ou des problèmes avec les librairies tierces. Prenez le temps d’étudier chaque dépendance, testez et committez régulièrement.
5. Conclusion
Mettre à jour Angular n’est jamais une partie de plaisir, surtout dans un projet complexe avec de nombreuses dépendances. Mais avec npm outdated, npm list et npm info, vous pouvez vous en sortir dans des délais raisonnables
Président et fondateur de NeoLegal, développe des solutions logicielles qui facilitent le quotidien des professionnels du droit des sociétés.