Comment mettre à niveau Angular CLI vers la dernière version


102

En utilisant ng --versionj'ai:

@ angulaire / cli: 1.0.0

qui n'est pas la dernière version disponible.

Depuis que j'ai Angular CLI globalement installé sur mon système, afin de le mettre à niveau, j'ai essayé:

npm update angular-cli -g

Mais cela ne fonctionne pas, car il reste à la version 1.0.0.

Réponses:


833

Après avoir lu quelques problèmes signalés sur le référentiel GitHub, j'ai trouvé la solution.

Afin de mettre à jour le package angular-cli installé globalement dans votre système, vous devez exécuter:

npm uninstall -g @angular-cli
npm install -g @angular/cli@latest

En fonction de votre système, vous devrez peut-être préfixer les commandes ci-dessus avec sudo.

De plus, vous souhaiterez probablement également mettre à jour la version de votre projet local, car dans le répertoire de votre projet, elle sera sélectionnée avec une priorité plus élevée que la version globale:

rm -rf node_modules
npm uninstall --save-dev @angular-cli
npm install --save-dev @angular/cli@latest
npm install

merci grizzm0 pour l'avoir signalé sur GitHub .

Après avoir mis à jour votre CLI, vous souhaitez probablement également mettre à jour votre version Angular .

Remarque : si vous effectuez une mise à jour vers Angular CLI 6+ à partir d'une version antérieure, vous devrez peut-être lire ceci .

Edit : De plus, si vous étiez toujours sur une version 1.x du cli, vous devez convertir votre angular-cli.jsonen angular.json, ce que vous pouvez faire avec la commande suivante:

ng update @angular/cli --from=1.7.4 --migrate-only

(Vérifiez ceci pour plus de détails).


3
Alerte pédantique: vous pouvez trouver plus de détails sur les changements entre les versions dans l'onglet Versions sur GitHub. Lien: github.com/angular/angular-cli/releases
Stuti Verma

14
Mise à jour 2017 (npm @ 5): si vous avez vraiment besoin de nettoyer votre cache: "npm cache clean --force"
Neyt

3
pourquoi désinstaller angular-cli et non tout @ angular / cli?
YASH DAVE

4
L'exécution de la commande npm cache clean génère l'erreur «À partir de npm @ 5, le cache npm s'auto-guérit des problèmes de corruption et les données extraites du cache sont garanties valides. Si vous voulez vous assurer que tout est cohérent, utilisez plutôt 'npm cache verify'. ' "si vous voulez forcer, vous pouvez ajouter --force
Pushkal Boganatham

1
@PushkalBoganatham comme @neyt l'a déclaré, vous devez utiliser le --forcedrapeau
svict4

149

ng6 + -> 7,0

Mettre à jour RxJS (dépend de RxJS 6.3)

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

Retirer rxjs-compat

Ensuite, mettez à jour les packages principaux et Cli:

ng update @angular/cli @angular/core

(Facultatif: mettez à jour Node.js vers la version 10 qui est prise en charge dans NG7)

ng6 + (Cli 6.0+) : propose des commandes simplifiées

Tout d'abord, mettez à jour votre Cli

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

Ensuite, mettez à jour vos packages principaux

ng update @angular/core

Si vous utilisez RxJS, exécutez

ng update rxjs

Il mettra à jour RxJS vers la version 6 et installera le rxjs-compatpackage sous le capot.

Si vous rencontrez des erreurs de construction, essayez une installation manuelle de:

npm i rxjs-compat
npm i @angular-devkit/build-angular

Enfin, vérifiez votre version

ng v

Remarque sur la version de production:

ng6 n'utilise plus intldanspolyfills.ts

//remove them to avoid errors
import 'intl';
import 'intl/locale-data/jsonp/en';

ng5 + (Cli 1.5+)

npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@next typescript@2.4.2 rxjs@'^5.5.2'
npm install typescript@2.4.2 --save-exact

Remarque:

  1. La version Typescript prise en charge pour Cli 1.6 au moment de l'écriture est jusqu'à 2.5.3.
  2. L'utilisation de @next met à jour le package en version bêta, si disponible. Utilisez @latest pour obtenir la dernière version non bêta.

Après avoir mis à jour le package global et local, effacez le cache pour éviter les erreurs:

npm cache verify (recommended)
npm cache clean (for older npm versions)

Voici les références officielles:

  1. Mise à jour de la Cli
  2. Mise à jour du package principal des packages principaux .

4
npm cache clean --force
M'a

1
Pourquoi oh pourquoi cette partie est-elle non dans les notes de publication!
Drenai

pouvez-vous s'il vous plaît confirmer ce que vous avez dit à propos de RxJS 6 étant obsolète. Partout où je regarde, il semble que la v6 soit la dernière version stable github.com/ReactiveX/rxjs rxjs-dev.firebaseapp.com
Joey Gough

1
@JoeyGough belle prise! Ng7 dépend de rxjs 6.3. Merci pour votre commentaire. ref: github.com/angular/angular/blob/master/…
Pageii Studio

108

vous pouvez simplement utiliser

npm install -g angular-cli - si c'est votre première fois

npm install -g @angular/cli@latest - si vous êtes déjà installé, donc pour la mise à jour


37

La puissante commande installe et remplace le dernier package.

J'avais un problème similaire. Je l'ai corrigé.

 npm install -g @angular/cli@latest

et

npm install --save-dev @angular/cli@latest

entrez la description de l'image ici


cela fonctionnera pour une CLI angulaire locale, vérifiez ma réponse pour améliorer la solution globale
Francesco Borzi

mis à jour mon global cli
Rahmathullah M


22

L'approche suivante a fonctionné pour moi:

npm uninstall -g @angular/cli

puis

npm cache verify

puis

npm install -g @angular/cli@latest

Je travaille sous Windows 10, parfois je devais utiliser: npm cache clean --forceaussi. Vous n'avez pas besoin de le faire si vous ne rencontrez aucun problème lors de l'installation.


2
Vous n'avez pas besoin de spécifier @latest, car le dernier est la valeur par défaut.
Ambroise Rabier

Si cette solution ne fonctionne pas pour vous: stackoverflow.com/a/58678941/8718377
veben

17

Si vous rencontrez des difficultés pour gérer votre version CLI globale , il est préférable d'utiliser NVM: MAC , Windows .

Pour mettre à jour la CLI locale dans votre projet Angular, procédez comme suit:

À partir de CLI v6, vous pouvez simplement exécuter ng updatepour que vos dépendances soient mises à jour automatiquement vers une nouvelle version.

ng update @angular/cli

Avec ng updateparfois , vous voudrez peut - être ajouter le --forcedrapeau.

Vous pouvez également passer l' --allindicateur pour mettre à niveau tous les packages en même temps.

ng update --all --force

Si vous souhaitez simplement migrer CLI, exécutez simplement ceci:

ng update @angular/cli --migrateOnly

Vous pouvez également passer le drapeau --from=from- la version à partir de laquelle migrer, par exemple --from=1.7.4. Cet indicateur n'est disponible qu'avec un seul package en cours de mise à jour, et uniquement lors de la migration.

Une fois la mise à jour terminée, assurez-vous que la version de dactylographié que vous avez installée est prise en charge par votre version angulaire actuelle, sinon vous devrez peut-être rétrograder la version dactylographiée. Gardez également à l'esprit que la dernière version d'angular ne prend généralement pas en charge la dernière version du manuscrit.

Vérifiez Angular CLI / Angular / NodeJS / Typescriptles versions de compatibilité ici

Consultez également ce guide Mise à jour de vos projets Angular et update.angular.io


ANCIENNE REPONSE:
Tout ce que vous avez à faire est de faire une comparaison avec angular-cli-diff et d'appliquer les changements dans votre projet actuel.

Voici les étapes:

  1. Disons que vous passez de 1.4. à 1.5 alors vous faites https://github.com/cexbrayat/angular-cli-diff/compare/1.4.0...1.5.0
  2. cliquez sur l' File changedonglet
  3. Appliquez les modifications à votre projet actuel.
  4. npm install / yarn
  5. Tout tester npm scripts( plus de détails ici: https://stackoverflow.com/a/45431592/415078 )

14

En plus de la réponse @ShinDarth .

J'ai fait ce qu'il a dit mais mon paquet n'a pas mis à jour la version angulaire, et je sais que cet article concerne angular-cli, mais je pense que cela peut aussi aider.

  • donc après avoir fait ce que @ShinDarth a dit ci-dessus, pour corriger ma version angulaire, j'ai dû créer un nouveau projet avec -ng new projectnamecelui qui générait un package.
  • copiez le nouveau package, puis collez le nouveau package sur tous les packages de projets nécessitant une mise à jour (n'oubliez pas d'ajouter les dépendances que vous aviez et de changer le nom sur la première ligne) ou vous pouvez simplement changer les versions manuellement sans copier-coller.
  • puis courez -npm install.

Maintenant que je ng servetravaille à nouveau, il y a peut-être une meilleure façon de faire tout cela, si quelqu'un le sait, partagez-le, car c'est une douleur à voir avec tous les projets qui nécessitent une mise à jour.


ressemble plus à un ajout à ma réponse qu'à une réponse, alors peut-être pouvez-vous le déplacer en commentaire sous ma réponse?
Francesco Borzi

7
sry, tu as raison mais j'ai besoin de 50 de réputation pour faire un commentaire à ta réponse.
Leonardo Souza Paiva

9

Pour mettre à jour Angular CLI vers une nouvelle version, vous devez mettre à jour à la fois le package global et le package local de votre projet.

Paquet global:

npm uninstall -g @angular/cli
npm cache clean
# if npm version is > 5 then use `npm cache verify` to avoid errors (or to avoid using --force)
npm install -g @angular/cli@latest

Package de projet local:

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install

Source: Github


3

Dans mon cas, j'ai installé angular-cli localement en utilisant npm install --save-dev angular-cli. Ainsi, lorsque j'utilise la commande npm install -g @ angular / cli, cela génère une erreur disant que "Votre version globale de la CLI Angular (1.7.3) est supérieure à votre version locale (1.4.9)" . Veuillez noter que angular-cli, @ angular / cli et @ angular / cli @ latest sont deux cli différents. Ce qui résout ce problème est de désinstaller tous les cli, puis d'installer le dernier cli angulaire à l'aide de npm install -g @ angular / cli @ latest

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.