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

Kürzlich habe ich das Angular 2-Tutorial unter https://angular.io/docs/ts/latest/tutorial/ gestartet .

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

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

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

Der Befehl npm update -D && npm update -Saktualisiert alle darin enthaltenen Pakete entsprechend ihrem definierten Versionsbereichpackage.json auf die neueste Version . Sie können mehr darüber lesen Sie hier .

Wenn Sie Angular von einer früheren Version aktualisieren möchten, 2.0.0-rc.1müssen Sie diese manuell bearbeiten package.json, da Angular in mehrere npm-Module aufgeteilt wurde. Ohne dies können Sie, wie das Paket angle2 zeigt 2.0.0-beta.21, niemals die neueste Version von Angular verwenden.
Eine Liste mit einigen der häufigsten Module, die Sie für den Einstieg benötigen, finden Sie im Schnellstart-Repository .

Anmerkungen:

• Eine coole Möglichkeit, mit der neuesten Version Ihrer Pakete auf dem Laufenden zu bleiben, ist die Verwendung, npm outdateddie Ihnen alle veralteten Pakete zusammen mit der gewünschten und neuesten Version anzeigt.

• Der Grund , warum wir an der Kette zwei Befehle benötigen, npm update -Dund npm update -Ssind zu überwinden , um diesen Fehler , bis es behoben ist.

Ein weiteres schönes Paket, das ich für die Migration von einer Beta-Version von Angular2 verwendet habe, Angular2 2.0.0 finalistnpm-check-updates

Es zeigt die neueste verfügbare Version aller in Ihrer package.json angegebenen Pakete. Im Gegensatz dazu ist npm outdatedes auch in der Lage, Ihre package.json zu bearbeiten, so dass Sie eine npm upgradespätere durchführen können.

Installieren

sudo npm install -g npm-check-updates

Verwendung

ncuZur Ausstellung

ncu -u zum Umschreiben Ihrer package.json

Upgrade auf das neueste Angular 5

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

Andere Pakete, die von der eckigen CLI installiert werden npm install --save core-js@latest rxjs@latest zone.js@latest

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

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

Andere Pakete, die vom Winkelcli als dev dev installiert werden: 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

Installieren Sie die neueste unterstützte Version, die von Angular CLI verwendet wird (tun Sie nicht @latest): 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": {}
  }
}

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

Mit ng updatemanchmal möchten Sie vielleicht --forceFlag hinzufügen . Wenn Sie dies tun, stellen Sie sicher, dass die auf diese Weise installierte Typoskriptversion von Ihrer aktuellen Winkelversion unterstützt wird. Andernfalls müssen Sie möglicherweise die Typoskriptversion herunterstufen.

Lesen Sie auch dieses Handbuch. Aktualisieren Ihrer Angular-Projekte

Nur für Bash- Benutzer

Wenn Sie eingeschaltet sind Mac/Linuxoder Bash on ausführen Windows(dies funktioniert standardmäßig nicht 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 die Version an, die Sie nicht möchten, z. B. @ 4.4.5, oder geben Sie @latest ein, um die neueste Version zu erhalten

Überprüfen Sie Ihre package.jsonEinstellungen, um sicherzustellen, dass Sie alle @angular/*Pakete aktualisieren, auf die sich Ihre App verlässt

• So zeigen Sie die genaue @angularVersion in Ihrem Projektlauf an:
  npm ls @angular/compileroderyarn list @angular/compiler
• So überprüfen Sie die neueste stabile @angularVersion, die auf npm run verfügbar ist:
  npm show @angular/compiler version

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 System deinstallieren.

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

2. Bereinigen Sie den Cache

npm cache clean

BEARBEITEN

Wie von @candidj hervorgehoben

npm cache cleanwird npm cache verifyab npm 5 umbenannt

3. Installieren Sie eckig global

npm install -g @angular/cli@latest

4. Lokale Projekteinrichtung, falls vorhanden

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

Bitte überprüfen Sie das gleiche auf dem Link unten:

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

Dies wird das Problem lösen.

Alternativer Ansatz mit npm-upgrade :

1. npm i -g npm-upgrade

Gehen Sie zu Ihrem Projektordner

2. npm-upgrade check

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

Das ist einfach

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

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

Wenn Sie auch das verwenden cli, können Sie dies tun:

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'})";
}

Dadurch werden die Pakete genau (-E) und die CLI-Pakete in devDependencies(-D) gespeichert.

Fangen Sie einfach hier an:

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 diese Funktion war, aber wenn Sie "Basic" auswählen, werden Ihnen nicht alle erforderlichen Schritte angezeigt, und Sie verpassen möglicherweise etwas Wichtiges, das Ihre ansonsten "Basic" -Anwendung verwendet .

Ab Version 6 gibt es einen neuen Angular CLI-Befehl, ng updateder Ihre Abhängigkeiten intelligent durchläuft und Überprüfungen durchführt, um sicherzustellen, dass Sie die richtigen Dinge aktualisieren :-)

Die Schritte beschreiben, wie man es benutzt :-)

npm deinstallieren --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'

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

Dies prüft, ob alle zufrieden sind und ob die beste Passform vorliegt.

Ich hatte viele Probleme mit dem Aktualisieren und Beibehalten meiner App-Funktion. Ich ließ die ausführliche Linse die Prüfung durchführen und lief dann

npm i

neu vorgeschlagene Abhängigkeiten installieren.

Wenn Sie wie ich aussehen, um Ihr Projekt auf den neuesten Stand zu bringen, funktioniert dies seit Angular 6 für mich:

Öffnen Sie die Konsole in Ihrem Projektordner. If you type: ng updateAnschließend wird die folgende Meldung angezeigt:

        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

Endlich 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