Comment mettre à jour Angular CLI dans sa dernière version
Lors de l'installation du framewok Angular, deux éléments sont installés : le framework en lui-même et Angular CLI, une interface en ligne de commande qui gère le déploiement du framework dans vos projets. Pour mettre à jour Angular CLI globalement et dans vos projets, il y a différentes étapes à connaître.
Vous devez au préalable désinstaller Angular CLI, vider le cache du gestionnaire de paquets de Node, NPM, pour qu'il prenne de nouvelles informations sur les nouveaux paquets existants puis, enfin, installer la dernière version d'Angular CLI. Selon votre système d'exploitation, vous devrez peut-être exécuter les commandes en tant qu'administrateur.
Pour désinstaller globalement Angular CLI, on utilise la commande "npm uninstall" avec l'option "-g" (pour "global").
npm uninstall -g @angular/cli
Il faut ensuite mettre à jour le cache de NPM. La commande dépend alors de la version installée. Si vous utilisez une version inférieure à la version 5, il faut utiliser la commande suivante :
npm cache clean
A partir de la version 5, la commande à utiliser a été modifiée.
npm cache verify
Pour finir, il ne reste plus qu'à installer la dernière version d'Angular CLI.
npm install -g @angular/cli@latest
Selon la version d'Angular CLI précédemment installée et la nouvelle version, il peut y avoir des modifications supplémentaires à appliquer. Si vous mettez à jour Angular CLI vers une version postérieure ou égale à la version 6, vous devez modifier le fichier de configuration "angular.json". La commande "ng-build" ne réduit plus la taille du code car il faut ajouter des éléments de configuration supplémentaires. Naviguez dans le fichier jusqu'à la clé "projects.NOM_DE_VOTRE_PROJET.architect.build.configurations.production" puis modifiez ensuite la clé "production" pour qu'elle ressemble à ceci :
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
Grâce à cette modification, la commande "ng-build" fonctionnera normalement pour votre projet.
Si vous avez mis à jour Angular CLI à partir d'une version 1, quelle qu'elle soit, le nom du fichier de configuration d'Angular a changé. Il ne s'appelle plus "@angular/cli.json" mais "angular.json". Il existe une commande qui migre votre configuration de l'ancien fichier vers le nouveau :
ng update @angular/cli --from=1.7.4 --migrate-only
Mettre à jour Angular CLI globalement ne modifie pas la version installée dans vos projets. Pour le mettre à jour dans un projet, il faut d'abord se rendre dans le répertoire du projet puis supprimer les modules installés.
rm -rf node_modules
Il faut ensuite enlever Angular CLI des dépendances du projet et le rajouter avec la dernière version.
npm uninstall --save-dev @angular/cli npm install --save-dev @angular/cli@latest
Pour finir, il suffit d'exécuter la commande "npm install". Le gestionnaire de paquets va alors mettre en place tous les modules indiqués dans les dépendances du projet, dont la dernière version d'Angular CLI.
Si vous souhaitez mettre à jour le framework Angular, les développeurs ont conçu une page dédiée pour connaître toutes les étapes à suivre en fonction de la version d'Angular utilisée.