it-swarm.com.de

Wie aktualisiere ich Winkel 2 (npm) korrekt auf die neueste Version?

Vor kurzem habe ich mit Angular 2 ein Tutorial unter https://angular.io/docs/ts/latest/tutorial/ gestartet.

und mit Angular 2 Beta 8 aufgehört ..__ Jetzt habe ich das Tutorial wieder aufgenommen und die letzte Beta ist Beta 14.

Wenn ich einfach npm update mache, werden ein paar Module (vorinstalliert mit dem Tutorial) aktualisiert, nicht aber Angular2 (ich kann das mit npm ls sehen).

Wenn ich npm update angle 2 oder npm update [email protected] mache, tut es auch nichts.

122
dragonmnl

Der Befehl npm update -D && npm update -S aktualisiert alle Pakete in package.json auf ihre neueste Version entsprechend ihrem definierten Versionsbereich. Sie können mehr darüber lesen hier .

Wenn Sie Angular von einer Version vor 2.0.0-rc.1 aktualisieren möchten, müssen Sie package.json manuell bearbeiten, da Angular in mehrere npm-Module aufgeteilt wurde. Ohne dies, da angle2 package auf 2.0.0-beta.21 verweist, können Sie niemals die neueste Version von Angular ..__ verwenden.
Eine Liste mit einigen der gebräuchlichsten Module, die Sie zum Einstieg benötigen, finden Sie im Schnellstart-Repository .

Anmerkungen: 

  • Eine coole Methode, um mit der neuesten Version Ihres Pakets auf dem Laufenden zu bleiben, ist npm outdated . Hier werden Ihnen alle veralteten Pakete zusammen mit ihrer gewünschten und der neuesten Version angezeigt.

  • Der Grund, warum wir zwei Befehle, npm update -D und npm update -S, verketten müssen, besteht darin, diesen Fehler zu überwinden, bis er behoben ist. 

204
Cosmin Ababei

Ein weiteres Nice-Paket, das ich für die Migration von einer Beta-Version von Angular2 zu Angular2 2.0.0 final verwendet habe, ist npm-check-updates.

Es zeigt die neueste verfügbare Version aller Pakete, die in package.json angegeben sind. Im Gegensatz zu npm outdated können Sie hier auch package.json bearbeiten, sodass Sie später einen npm upgrade ausführen können.

Installieren

Sudo npm install -g npm-check-updates

Verwendungszweck

ncufür die Anzeige

ncu -u zum Umschreiben Ihres package.json

53
Seven

Upgrade auf den neuesten Winkel 5

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

Andere Pakete, die mit dem angle cli installiert werden npm install --save [email protected] [email protected] [email protected]

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

Typen von Dev-Paketen: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

Andere Pakete, die vom devi-Cli als dev dev installiert werden: npm install --save-dev [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

Installieren Sie die neueste unterstützte Version, die von Angular cli verwendet wird (tun Sie @latest nicht): npm install --save-dev [email protected]

Benennen Sie die Datei angle-cli.json in .angular-cli.json um und aktualisieren Sie den Inhalt:

{
  "$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

AKTUALISIEREN:
Ab CLI v6 können Sie einfach ng update ausführen, um Ihre Abhängigkeiten automatisch auf eine neue Version zu aktualisieren. 

Mit ng update möchten Sie manchmal --force-Flag ..__ hinzufügen. Wenn Sie dies tun, stellen Sie sicher, dass die Version von TypeScript Die auf diese Weise installierte Version wird von Ihrer aktuellen Winkelversion .__ unterstützt. Andernfalls müssen Sie möglicherweise die TypeScript-Version downgraden.

Schauen Sie sich auch dieses Handbuch an Aktualisieren Sie Ihre Angular-Projekte


Für bash nur für Benutzer

Wenn Sie sich auf Mac/Linux befinden oder bash auf Windows laufen (dies funktioniert nicht standardmäßig Windows CMD), können Sie diesen Oneliner ausführen:

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

Geben Sie einfach eine Version an, die Sie nicht @ 4.4.5 verwenden möchten, oder geben Sie @latest ein, um die neueste Version zu erhalten

Überprüfen Sie Ihren package.json nur zu Vergewissern Sie sich, dass Sie alle @angular/*-Pakete aktualisieren, auf die Ihre App angewiesen ist

  • So sehen Sie die genaue @angular-Version in Ihrem Projektlauf:
    npm ls @angular/compiler oder yarn list @angular/compiler 
  • So überprüfen Sie die neueste stabile Version von @angular, die auf einem npm-Lauf verfügbar ist:
    npm show @angular/compiler version
11
Kuncevič

Die offizielle npm-Seite schlägt eine strukturierte Methode zum Aktualisieren der Winkelversion für globale und lokale Szenarien vor.

1. Zunächst müssen Sie den aktuellen Winkel von Ihrem .__ deinstallieren. System.

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

2.Reinigen Sie den Cache

npm cache clean

EDIT

Wie @candidj darauf hinweist

npm cache clean wird ab npm 5 in npm cache verify umbenannt

3.Install global installieren

npm install -g @angular/[email protected]

4.Lokales Projekt-Setup, wenn Sie eines haben

rm -rf node_modules
npm install --save-dev @angular/[email protected]
npm install

Bitte überprüfen Sie dasselbe unten auf dem Link:

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

Dies löst das Problem.

7
Kevin RED

Wenn Sie alle Pakete auf die neueste Version installieren/aktualisieren möchten und Windows ausführen, können Sie dies in powershell.exe verwenden:

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

Wenn Sie auch die cli verwenden, können Sie Folgendes tun:

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

Dadurch werden die Pakete exakt (-E) und die Cli-Pakete in devDependencies (-D) gespeichert.

3
PierreDuc

Alternativer Ansatz mit npm-upgrade :

  1. npm i -g npm-upgrade

Gehen Sie in Ihren Projektordner

  1. npm-upgrade check

Sie werden gefragt, ob Sie das Paket aktualisieren möchten. Wählen Sie Ja

Das ist einfach

3
student

Beginnen Sie einfach hier:

https://update.angular.io

Wählen Sie die Version aus, die Sie verwenden, und Sie erhalten eine schrittweise Anleitung.

Ich empfehle, "Erweitert" zu wählen, um alle Schritte anzuzeigen. Komplexität ist ein relatives Konzept - und ich weiß nicht, wessen blöde Idee dieses Feature war, aber wenn Sie "Basic" auswählen, werden Ihnen nicht alle erforderlichen Schritte angezeigt, und Sie könnten etwas Wichtiges verpassen, das Ihre ansonsten "Basic" -Anwendung verwendet . 

 enter image description here

Ab Version 6 gibt es einen neuen Angular CLI-Befehl ng update, der Ihre Abhängigkeiten intelligent durchläuft und prüft, ob Sie die richtigen Dinge aktualisieren :-)

In den Schritten wird beschrieben, wie man es benutzt :-)

2
Simon_Weaver

npm uninstall --save-dev angle-cli

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

ng update @ angle/cli

ng update @ angle/core --force

ng update @ angle/material oder npm i @ angle/cdk @ 6 @ angle/material @ 6 --save

npm install TypeScript @ '> = 2.7.0 <2.8.0'

1
KatyaKrym

Am besten verwenden Sie die Erweiterung (pflannery.vscode-versionlens) in vscode.

dies prüft, ob alle Anforderungen erfüllt sind, und überprüft, ob es am besten passt.

ich hatte viele Probleme mit dem Aktualisieren und Verwalten meiner App in der Funktionseinheit. Ich ließ das ausführliche Lense die Überprüfung durchführen und lief dann

npm i

um neue vorgeschlagene Abhängigkeiten zu installieren.

0
SamYah

Wenn Sie wie ich aussehen, nur um Ihr Projekt auf den neuesten Stand zu bringen, funktioniert das seit Angular 6:

Öffnen Sie die Konsole in Ihrem Projektordner: If you type: ng update und Sie erhalten die folgende Meldung:

        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.

Also gehe ich normalerweise geradeaus und mache:

ng update --all

Zum Schluss können Sie Ihre neue Version überprüfen:

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