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

Récemment, j'ai commencé le didacticiel Angular 2 sur https://angular.io/docs/ts/latest/tutorial/ .

et je suis parti avec Angular 2 beta 8. Maintenant j'ai repris le tutoriel et la dernière beta est beta 14.

Si je fais simplement une mise à jour de npm, 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 angular2@2.0.0beta.14, cela ne fait rien non plus.

La commande npm update -D && npm update -Smettra à jour tous les packages à l'intérieur package.jsonvers leur dernière version, en fonction de leur plage de versions définie . Vous pouvez en savoir plus ici .

Si vous souhaitez mettre à jour Angular à partir d'une version antérieure à 2.0.0-rc.1, vous devrez éditer manuellement package.json, car Angular a été divisé en plusieurs modules npm. Sans cela, comme l' indique le package angular22.0.0-beta.21 , vous ne pourrez jamais utiliser la dernière version d'Angular.
Une liste avec certains des modules les plus courants dont vous aurez besoin pour commencer peut être trouvée dans le référentiel de démarrage rapide .

Remarques:

• Une façon intéressante de rester à jour avec la dernière version de vos packages est d'utiliser npm outdatedce qui vous montre tous les packages obsolètes avec leur dernière version souhaitée.

• La raison pour laquelle nous devons enchaîner deux commandes npm update -Det npm update -Sest de surmonter ce bogue jusqu'à ce qu'il soit corrigé.

Un autre bon package que j'ai utilisé pour migrer d'une version bêta d'Angular2 vers Angular2 2.0.0 finalestnpm-check-updates

Il affiche la dernière version disponible de tous les packages spécifiés dans votre package.json. En revanche, npm outdatedil est également capable de modifier votre package.json, vous permettant de faire un npm upgradeplus tard.

Installer

sudo npm install -g npm-check-updates

Usage

ncupour l'affichage

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

Mettre à niveau vers le dernier Angular 5

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

Autres packages installés par angular cli npm install --save core-js@latest rxjs@latest zone.js@latest

Packages Angular Dev: npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest

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

Autres packages installés en tant que dev dev par angular cli: 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 Angular cli (ne faites pas @latest): npm install --save-dev typescript@2.4.2

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": {}
  }
}

MISE
À JOUR: À partir de la CLI v6, vous pouvez simplement exécuter ng updateafin de mettre à jour automatiquement vos dépendances vers une nouvelle version.

Avec ng updateparfois , vous voudrez peut - être ajouter le --forcedrapeau. Si vous le faites, assurez-vous que la version dactylographiée que vous avez installée de cette manière est prise en charge par votre version angulaire actuelle, sinon vous devrez peut-être rétrograder la version dactylographiée.

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

Pour les utilisateurs de bash uniquement

Si vous êtes Mac/Linuxallumé ou exécutez bash on Windows(cela ne fonctionnera pas par défaut Windows CMD), vous pouvez exécuter cet oneliner:

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.jsonjuste pour vous assurer que vous mettez à jour tous les @angular/*packages sur lesquels votre application s'appuie

• Pour voir la @angularversion exacte de votre projet, exécutez:
  npm ls @angular/compilerouyarn list @angular/compiler
• Pour vérifier la dernière @angularversion stable disponible sur npm run:
  npm show @angular/compiler version

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

1.Tout d'abord, vous devez désinstaller l'angular actuel de votre système.

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

2. nettoyez le cache

npm cache clean

ÉDITER

Comme le souligne @candidj

npm cache cleanest renommé à npm cache verifypartir de npm 5

3. installer angulaire 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.

Approche alternative utilisant npm-upgrade :

1. npm i -g npm-upgrade

Allez dans votre dossier de projet

2. npm-upgrade check

Il vous demandera si vous souhaitez mettre à niveau le package, sélectionnez Oui

C'est simple

Si vous souhaitez installer / mettre à niveau tous les packages vers la dernière version et que vous exécutez 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 le cli, vous pouvez le faire:

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 exacts (-E) et les packages cli dans devDependencies(-D)

Commencez simplement ici:

https://update.angular.io

Sélectionnez la version que vous utilisez et elle 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 était l'idée stupide de cette fonctionnalité, mais si vous sélectionnez `` Basique '', elle ne vous montrera pas toutes les étapes nécessaires et vous risquez de manquer quelque chose d'important que votre application autrement `` Basique '' utilise .

À partir de la version 6, il existe une nouvelle commande CLI angulaire ng updatequi parcourt intelligemment vos dépendances et effectue des vérifications pour vous assurer que vous mettez à jour les bonnes choses :-)

Les étapes décrivent comment l'utiliser :-)

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

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

ng update @ angular / cli

ng update @ angular / core --force

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

npm install typescript @ '> = 2.7.0 <2.8.0'

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

cela vérifie que tous satisfont et vérifie le meilleur ajustement.

j'ai eu beaucoup de problèmes avec la mise à jour et le maintien de l'unité fonctionnelle de mon application

npm je

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

Si vous me cherchez simplement pour mettre à jour votre projet au plus récent, voici ce qui fonctionne depuis Angular 6:

Ouvrez la console sur votre dossier de projet: If you type: ng updatevous obtiendrez alors 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 généralement 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