web-dev-qa-db-fra.com

Comment mettre à niveau correctement angular 2 (npm) vers la dernière version?

Récemment, j’ai lancé le didacticiel Angular 2 à l’adresse https://angular.io/docs/ts/latest/tutorial/ .

et laissé avec Angular 2 beta 8 . Maintenant, j'ai repris le tutoriel et la dernière version bêta est la version 14.

Si je fais simplement npm update, quelques modules (préchargés avec le tutoriel) sont mis à jour mais pas Angular2 (je peux le voir avec npm ls).

Si je fais npm update angular 2 ou npm update [email protected], cela ne fait rien non plus.

npmangular
122
dragonmnl

La commande npm update -D && npm update -S mettra à jour tous les packages contenus dans package.json vers leur dernière version, en fonction de leur plage de versions définie. Vous pouvez en lire plus à ce sujet ici .

Si vous souhaitez mettre à jour Angular à partir d'une version antérieure à 2.0.0-rc.1, vous devez éditer manuellement package.json, car Angular a été scindé en plusieurs modules npm. Sans cela, comme angular2 package pointe sur 2.0.0-beta.21, vous ne pourrez jamais utiliser la dernière version de Angular .
Vous trouverez une liste des modules les plus courants dont vous aurez besoin pour commencer dans le répertoire quickstart repository .

Remarques: 

  • Un moyen intéressant de rester à jour avec la dernière version de vos paquets consiste à utiliser npm outdated qui vous montre tous les paquets obsolètes avec la version recherchée et la dernière.

  • La raison pour laquelle nous devons chaîner deux commandes, npm update -D et npm update -S, est de surmonter ce bogue jusqu'à ce qu'il soit corrigé. 

204
Cosmin Ababei

Un autre paquetage de Nice que j’ai utilisé pour migrer une version bêta d’Angular2 vers Angular2 2.0.0 final est npm-check-updates

Il affiche la dernière version disponible de tous les packages spécifiés dans votre package.json. Contrairement à npm outdated, il est également capable d’éditer votre package.json, ce qui vous permet d’effectuer un npm upgrade plus tard.

Installer

Sudo npm install -g npm-check-updates

Utilisation

ncupour l'affichage

ncu -u pour réécrire votre package.json

53
Seven

Mise à niveau vers la dernière version angulaire 5

Paquets Dep angulaires: npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

Autres paquets installés par la cli angulaire npm install --save core-js@latest rxjs@latest zone.js@latest

Forfaits de développement angulaire: npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest

Types de packages Dev: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

Autres paquetages installés en tant que dev dev par le cli angulaire: npm install --save-dev codelyzer@latest jasmine-core@latest jasmine-spec-reporter@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-coverage-istanbul-reporter@latest karma-jasmine@latest karma-jasmine-html-reporter@latest protractor@latest ts-node@latest tslint@latest

Installez la dernière version prise en charge utilisée par la clé angulaire (ne faites pas @latest): npm install --save-dev [email protected]

Renommez le fichier angular-cli.json en .angular-cli.json et mettez à jour le contenu:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "project3-example"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}
31
Isak La Fleur

METTRE À JOUR:
À partir de CLI v6 vous pouvez simplement exécuter ng update afin de mettre à jour automatiquement vos dépendances vers une nouvelle version. 

Avec ng update parfois vous voudrez peut-être ajouter --force flag . Si vous le faites, assurez-vous que la version de TypeScript que vous avez obtenue est installé de cette manière est pris en charge par votre version angulaire actuelle, sinon, vous devrez peut-être rétrograder la version de TypeScript.

Consultez également ce guide Mise à jour de vos projets Angular

Pour bash utilisateurs seulement

Si vous êtes sur que vous êtes sur Mac/Linux ou que vous exécutez bash sur Windows (qui ne fonctionnera pas avec Windows CMD par défaut), vous pouvez exécuter ce programme:

npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5 --save

yarn add @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5

Spécifiez simplement la version que vous ne voulez pas, par exemple @ 4.4.5 ou mettez @latest pour obtenir la dernière

Vérifiez votre package.json juste pour assurez-vous de mettre à jour tous les packages @angular/* sur lesquels votre application s'appuie

  • Pour voir la version exacte de @angular dans votre projet, exécutez:
    npm ls @angular/compiler ou yarn list @angular/compiler 
  • Pour vérifier la dernière version stable de @angular disponible sur npm, exécutez:
    npm show @angular/compiler version
11
Kuncevič

La page officielle npm suggère une méthode structurée pour mettre à jour la version angulaire pour les scénarios globaux et locaux.

Tout d’abord, vous devez désinstaller l’angle actuel de votre système.

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g @angular/cli

2.Nettoyer le cache

npm cache clean

MODIFIER

Comme l'a souligné @candidj

npm cache clean est renommé en npm cache verify à partir de npm 5

3.Installer globalement

npm install -g @angular/cli@latest

4. Configuration du projet local si vous en avez un

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

Veuillez vérifier la même chose sur le lien ci-dessous:

https://www.npmjs.com/package/@angular/cli#updating-angular-cli

Cela résoudra le problème.

7
Kevin RED

Si vous souhaitez installer/mettre à niveau tous les packages vers la dernière version et que vous utilisez Windows, vous pouvez l’utiliser dans powershell.exe:

foreach($package in @("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
    npm install @angular/$package@latest -E
}

Si vous utilisez également la cli, vous pouvez procéder comme suit:

foreach($package in @('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli')){
    iex "npm install @angular/$package@latest -E $(If($('cli','compiler-cli').Contains($package)){'-D'})";
}

Cela enregistrera les packages exact (-E) et les packages cli dans devDependencies (-D)

3
PierreDuc

Approche alternative utilisant npm-upgrade :

  1. npm i -g npm-upgrade

Allez dans votre dossier de projet

  1. npm-upgrade check

Il vous demandera si vous souhaitez mettre à jour le paquet, sélectionnez Oui

C'est simple

3
student

Commencez juste ici:

https://update.angular.io

Sélectionnez la version que vous utilisez et cela vous donnera un guide étape par étape.

Je recommande de choisir «Avancé» pour voir toutes les étapes. La complexité est un concept relatif - et je ne sais pas à qui est cette idée stupide, mais si vous sélectionnez "Basique", toutes les étapes nécessaires ne seront pas affichées et vous risquez de rater un élément important que votre application "basique" utilise . 

 enter image description here

Depuis la version 6, il existe une nouvelle commande CLI angulaire ng update qui analyse intelligemment vos dépendances et effectue des contrôles pour vous assurer que vous mettez à jour les éléments corrects :-)

Les étapes expliquent comment l'utiliser :-)

2
Simon_Weaver

npm désinstaller --save-dev angular-cli

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

ng update @ angular/cli

ng update @ angular/core --force

ng update @ angular/material ou npm i @ angular/cdk @ 6 @ angulaire/materiel @ 6save

npm install TypeScript @ '> = 2.7.0 <2.8.0'

1
KatyaKrym

La meilleure façon de le faire est d'utiliser l'extension (pflannery.vscode-versionlens) dans vscode.

ceci vérifie tout et vérifie le meilleur ajustement.

j'ai eu beaucoup de problèmes avec la mise à jour et le maintien de mon application, je laisse la lentille verbeuse faire la vérification et ensuite je cours

npm i

installer les nouvelles dépendances suggérées.

0
SamYah

Si vous cherchez comme moi juste pour mettre à jour votre projet au plus tard, voici ce qui fonctionne depuis angular 6:

Ouvrez la console sur votre dossier de projet: If you type: ng update et vous obtiendrez le message ci-dessous:

        We analyzed your package.json, there are some packages to update:

          Name                               Version                  Command to update
         --------------------------------------------------------------------------------
          @angular/cli                       7.0.7 -> 7.2.2           ng update @angular/cli
          @angular/core                      7.0.4 -> 7.2.1           ng update @angular/core

There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

Donc, je vais habituellement droit et fais:

ng update --all

Enfin, vous pouvez vérifier votre nouvelle version:

ng version

Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.2
@angular-devkit/build-angular     0.12.2
@angular-devkit/build-optimizer   0.12.2
@angular-devkit/build-webpack     0.12.2
@angular-devkit/core              7.2.2
@angular-devkit/schematics        7.2.2
@angular/cli                      7.2.2
@ngtools/webpack                  7.2.2
@schematics/angular               7.2.2
@schematics/update                0.12.2
rxjs                              6.3.3
TypeScript                        3.2.4
webpack                           4.28.4
0
Ernest