Möchten Sie ein Projekt von Angular v5 auf Angular v6 aktualisieren?

114

Da Angular 6 hier ist, möchte ich meine Angular 5-Clientanwendung aktualisieren oder auf Angular 6 verschieben, aber ich erhalte kein Tutorial oder etwas, das mich durch das Programm führen kann.

Meiner Meinung nach muss ich nur eine neue Angular-CLI ausführen und dann meine ältere Quelle in ein neues Projekt verschieben. Ich habe gelesen, dass Angular 6 einen neuen Renderer namens Ivy verwendet. Muss ich mein Projekt gemäß Ivy ändern?

Abhishek Chokra
quelle
7
update.angular.io
lealceldeiro

Antworten:

272

Upgrade von Angular v6 auf Angular v7

Version 7 von Angular wurde veröffentlicht. Offizieller Angular-Blog-Link . Ausführliche Informationen finden Sie im offiziellen Angular Update-Handbuch https://update.angular.io . Diese Schritte funktionieren für grundlegende Angular 6-Apps mit Angular Material.

ng update @angular/cli 
ng update @angular/core
ng update @angular/material

Upgrade von Angular v5 auf Angular v6

Version 6 von Angular wurde veröffentlicht. Offizieller Angular-Blog-Link . Ich habe unten allgemeine Upgrade-Schritte erwähnt, aber vor und nach dem Update müssen Sie Änderungen an Ihrem Code vornehmen, damit er in Version 6 funktioniert. Ausführliche Informationen finden Sie auf der offiziellen Website https://update.angular.io .

Upgrade-Schritte (weitgehend aus dem offiziellen Angular Update-Handbuch für eine grundlegende Angular-App mit Angular Material entnommen ):

  1. Stellen Sie sicher, dass die NodeJS-Version 8.9+ ist, wenn Sie sie nicht aktualisieren.

  2. Aktualisieren Sie Angular Cli global und lokal und migrieren Sie die alte Konfiguration .angular-cli.json in das neue Angular.json- Format, indem Sie Folgendes ausführen :

    npm install -g @angular/cli  
    npm install @angular/cli  
    ng update @angular/cli
    
  3. Aktualisieren Sie alle Ihre Angular-Framework-Pakete auf Version 6 und die richtige Version von RxJS und TypeScript, indem Sie Folgendes ausführen:

    ng update @angular/core
    
  4. Aktualisieren Sie Angular Material auf die neueste Version, indem Sie Folgendes ausführen:

    ng update @angular/material
    
  5. RxJS v6 hat wesentliche Änderungen gegenüber v5. V6 bietet das Abwärtskompatibilitätspaket rxjs-compatible, mit dem Ihre Anwendungen weiterhin funktionieren. Sie sollten jedoch den TypeScript-Code umgestalten, damit er nicht von rxjs-kompatibel abhängt. Führen Sie die folgenden Schritte aus, um TypeScript-Code umzugestalten:

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

    Hinweis: Wenn alle Ihre Abhängigkeiten auf RxJS 6 aktualisiert wurden, entfernen Sie rxjs- compatible, da dadurch die Bundle-Größe erhöht wird. Weitere Informationen finden Sie in diesem RxJS-Upgrade-Handbuch .

    npm uninstall rxjs-compat
    
  6. Fertig laufen ng serve, um es zu überprüfen.
    Wenn beim Erstellen Fehler auftreten, finden Sie unter https://update.angular.io detaillierte Informationen.

Upgrade von Angular v5 auf Angular 6.0.0-rc.5

  1. Aktualisieren Sie rxjs auf 6.0.0-beta.0. Weitere Informationen finden Sie in diesem RxJS-Upgrade-Handbuch . RxJS v6 hat bahnbrechende Änderungen, daher machen Sie Ihren Code zuerst mit der neuesten RxJS-Version kompatibel.

  2. Aktualisieren Sie die NodeJS-Version auf 8.9+ (dies wird von der Angular Cli 6-Version benötigt).

  3. Aktualisieren Sie das globale Paket Angular cli auf die nächste Version.

    npm uninstall -g @angular/cli
    npm cache verify
    

    Wenn die npm-Version <5 ist, verwenden Sie npm cache clean

    npm install -g @angular/cli@next
    
  4. Ändern Sie die Versionen der Winkelpakete in der Datei package.json in ^6.0.0-rc.5

    "dependencies": {
      "@angular/animations": "^6.0.0-rc.5",
      "@angular/cdk": "^6.0.0-rc.12",
      "@angular/common": "^6.0.0-rc.5",
      "@angular/compiler": "^6.0.0-rc.5",
      "@angular/core": "^6.0.0-rc.5",
      "@angular/forms": "^6.0.0-rc.5",
      "@angular/http": "^6.0.0-rc.5",
      "@angular/material": "^6.0.0-rc.12",
      "@angular/platform-browser": "^6.0.0-rc.5",
      "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
      "@angular/router": "^6.0.0-rc.5",
      "core-js": "^2.5.5",
      "karma-jasmine": "^1.1.1",
      "rxjs": "^6.0.0-uncanny-rc.7",
      "rxjs-compat": "^6.0.0-uncanny-rc.7",
      "zone.js": "^0.8.26"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.5.0",
      "@angular/cli": "^6.0.0-rc.5",
      "@angular/compiler-cli": "^6.0.0-rc.5",
      "@types/jasmine": "2.5.38",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.1.0",
      "jasmine-core": "~2.5.2",
      "jasmine-spec-reporter": "~3.2.0",
      "karma": "~1.4.1",
      "karma-chrome-launcher": "~2.0.0",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^0.2.0",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "postcss-loader": "^2.1.4",
      "protractor": "~5.1.0",
      "ts-node": "~5.0.0",
      "tslint": "~5.9.1",
      "typescript": "^2.7.2"
    }
    
  5. Nächstes Update des lokalen Angular cli-Pakets auf die nächste Version und Installation der oben genannten Pakete.

    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@next
    npm install 
    
  6. Das Angular CLI-Konfigurationsformat wurde gegenüber der Angular CLI 6.0.0-rc.2-Version geändert, und Ihre vorhandene Konfiguration kann automatisch aktualisiert werden, indem der folgende Befehl ausgeführt wird. Es entfernt die alte Konfigurationsdatei .angular-cli.json und schreibt eine neue angular.json- Datei.

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

Hinweis: - Wenn die folgende Fehlermeldung angezeigt wird: "Der Angular Compiler benötigt TypeScript> = 2.7.2 und <2.8.0, aber stattdessen wurde 2.8.3 gefunden." Führen Sie den folgenden Befehl aus:

npm install [email protected]
Ashish Jain
quelle
update.angular.io funktioniert derzeit nicht in Edge. Es wird in Ordnung geladen, aber sobald Sie anfangen, es ein wenig zu verwenden, verursacht es ein Problem, das dazu führt, dass die Seite nicht reagiert und der Browser fragt, ob Sie die Seite wiederherstellen möchten.
Devon Holcombe
3
Schritt 5 Ich bekomme bash: rxjs-5-to-6-migrate: command not found. Irgendwelche Gedanken?
William Hampshire
Wenn ich ng update @angular/corein meinem ionischen Projektordner Invalid range: "*"
laufe
1
Nach allen oben genannten Schritten bekam ich dieses dumme Problem: Modul konnte nicht gefunden werden "@angular-devkit/build-angular"von ... Also das behoben durch npm install @angular-devkit/build-angular --save-dev. Abgesehen davon hatte ich Bibliotheken zu aktualisieren , die vorherigen rxjs-compat verwendet hatten, wie ng update @ngx-translate/core, ng update @ng-bootstrap/ng-bootstrap, weil einige von ihnen nicht richtig aktualisiert.
Arsen Khachaturyan
2
Wenn Sie erhalten "Ihre globale Angular CLI-Version (6.0.8) ist größer als Ihre lokale Version (1.6.8). Die lokale Angular CLI-Version wird verwendet." benutze npm install @
angle
19

Angular 6 wurde gerade veröffentlicht.

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Hier ist, was für eines meiner kleineren Projekte funktioniert hat

  1. npm install -g @ angle / cli
  2. npm install @ angle / cli
  3. ng update @ angle / cli --migrate-only --from = 1.7.0
  4. ng update @ angle / core
  5. npm installiere rxjs-compatible
  6. ng dienen

Möglicherweise müssen Sie Ihre Ausführungsskripte in package.json aktualisieren. Wenn Sie Flags wie "App" und "Umgebung" verwenden, wurden diese auf "Projekt" bzw. "Konfiguration" aktualisiert.

Weitere Informationen finden Sie unter https://update.angular.io/ .

Arjun Shankar
quelle
Nach Schritt 2 musste ich die folgenden .json-Dateien (tsconfig, angle-cli.json, tslint) ohne Stückliste in UTF8 konvertieren. Bei diesem Schritt ist ein ungültiger JSON-Zeichenfehler aufgetreten.
Benjamin
16

Verwenden Sie einfach den offiziellen Upgrade-Leitfaden, der Ihnen sagt, was Sie für Ihre speziellen Anforderungen tun müssen:

Upgrade eckig

https://update.angular.io/

Valentin Despa
quelle
1
Dies sollte wirklich die akzeptierte Antwort sein, da sie alle anderen Upgrade-Fragen beantwortet
theTechRebel
8

Überprüfen Sie die schrittweisen Upgrade-Details von Angular 5 auf Angular 6. Hier finden Sie Details zu Problemen, die beim Upgrade auftreten, und wie Sie diese beheben können.

  • Aktualisieren Sie Ihre Knotenversion auf 8 oder höher und installieren Sie Angular cli weltweit spätestens um npm i -g @ angle / cli @ latest.
  • Angular 6 verwendet anstelle von .anguar-cli.json angular.json als Konfigurationsdatei. Auch tslint wurde geändert. Überprüfen Sie https://github.com/angular/angular-cli/wiki/angular-workspace auf die neuesten Konfigurationsdetails. Sie müssen eine Ihrer vorhandenen Konfigurationen in eine neue Konfigurationsdatei verschieben.
  • Erstellen Sie dazu ein weiteres Dummy-Projekt mit dem neuesten Cli, indem Sie ein neues 'Ihr-Projekt' und dieselben Standardeinstellungen wie Präfix, Stil usw. verwenden, die Sie zuvor für Ihr Projekt verwendet haben. Erstellen Sie ein neues Projekt mit cli https://github.com/angular/angular-cli/wiki/new
  • Verwenden Sie https://update.angular.io/ , um zu überprüfen, was gegenüber Ihrer aktuellen Version von Angular → Angular 6 geändert wurde. Hier erfahren Sie, wie Sie diese ändern / beheben können.
  • Befolgen Sie die obigen Schritte und kopieren / aktualisieren Sie die in Schritt 2 erstellte Datei angle.json. Führen Sie in Ihrem Projekt npm i aus, um alle Abhängigkeiten abzurufen, und führen Sie ein npm-Update durch
  • Jetzt kommt der große Teil. RxJS-Upgrade und Lösung von Konflikten. RxJS hat mit dieser Version standardisierte Importe von Operatoren und Observable-Erstellern. Führen Sie npm i -g rxjs-tslint aus und fügen Sie die folgende Flusenkonfiguration in tslint.json hinzu
{
  "rulesDirectory": [
    "node_modules/rxjs-tslint"
  ],
  "rules": {
    "rxjs-collapse-imports": true,
    "rxjs-pipeable-operators-only": true,
    "rxjs-no-static-observable-methods": true,
    "rxjs-proper-imports": true
  }
}
  • Führen Sie nun ng lint --fix aus. Dadurch werden nur wenige Probleme behoben, aber die meisten verbleibenden Probleme werden hervorgehoben, und Sie müssen sie manuell beheben.

Namensänderung des Operators:

do -> tap, 
catch -> catchError, 
switch -> switchAll, 
finally -> finalize

Alle Operatoren sind zu rxjs / operator gewechselt

import { map, filter, reduce } from 'rxjs/operators';

Beobachtbare Erstellungsmethoden werden nach rxjs verschoben

   import { Observable, Subject, of, from } from 'rxjs'; 

Sie sind fertig. Willkommen bei Angular 6 :) In meinem Blogbeitrag erfahren Sie, wie Sie ein Upgrade durchführen können

Uday Vunnam
quelle
4

Ich musste ng update @ angle / cli erneut ausführen, damit angular-cli.json in angular.json geändert wurde

Kris Bonev
quelle
2

Führen Sie die folgenden Kommentare aus, um von Angular 5 auf Angular 6 zu aktualisieren

  1. ng update @ angle / cli
  2. ng update @ angle / core
  3. npm installiere rxjs-compatible (Um ältere Versionen von rxjs 5.6 zu unterstützen)
  4. npm install -g rxjs-tslint (Um im Code vom Format rxjs 5 zum Format rxjs 6 zu wechseln. Die globale Installation funktioniert dann nur)
  5. rxjs-5-to-6-migrate -p src / tsconfig.app.json (Nach der Installation müssen wir es in unserem Quellcode in das Format rxjs6 ändern.)
  6. npm deinstalliere rxjs-compatible (entferne dies endgültig)
user2716958
quelle
2

Komplette Anleitung

----------------- Mit Angular-Cli --------------------------

1. Aktualisieren Sie die CLI global und lokal

  1. Verwenden von NPM (stellen Sie sicher, dass Sie die Knotenversion 8+ haben)

    npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save

  2. Garn verwenden

    yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2. Abhängigkeiten aktualisieren

ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs

Winkel 6 hängt jetzt von TypeScript 2.7 und RxJS 6 ab

Normalerweise würde das bedeuten, dass Sie Ihren Code überall dort aktualisieren müssen, wo RxJS-Importe und -Operatoren verwendet werden, aber zum Glück gibt es ein Paket, das sich um die meisten schweren Aufgaben kümmert:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

Dann können Sie rxjs-5-to-6-migrate ausführen

rxjs-5-to-6-migrate -p src/tsconfig.app.json

endlich entfernen rxjs-kompatibel

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

Siehe diesen Link https://alligator.io/angular/angular-6/


------------------- Ohne Angular-Cli -------------------------

Sie müssen Ihre package.jsonDatei also manuell aktualisieren .

package.json Screenshoot von Upgrade-Paketen

Dann renne

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json
bereket gebredingle
quelle
Ich bash: rxjs-5-to-6-migrate: command not founderhalte beim Versuch, den Befehl rxjs-5-to-6-migrate auszuführen. Irgendwelche Gedanken?
William Hampshire
1
@ WilliamHampshire haben Sie npm install -g rxjs-tslint
Joe
Yup keine Ahnung, was es ist @Joe
William Hampshire
Vielleicht hast du nicht den neuesten Tslint?
Joe
1
Wissen Sie, wie man das macht, ohne eckige Cli zu verwenden? In meinem Projekt mache ich alles manuell
Daniel
1

Wie Vinay Kumar betonte, wird die global installierte Angular CLI nicht aktualisiert. Um es global zu aktualisieren, verwenden Sie einfach die folgenden Befehle:

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

Hinweis: Wenn Sie ein vorhandenes Projekt aktualisieren möchten, müssen Sie das vorhandene Projekt ändern. Sie sollten package.json in Ihrem Projekt ändern .

Es gibt keine wesentlichen Änderungen in Angular selbst, aber sie befinden sich in RxJS. Vergessen Sie also nicht, die rxjs-kompatible Bibliothek zu verwenden, um mit Legacy-Code zu arbeiten.

  npm install --save rxjs-compat  

Ich habe einen guten Artikel über die Installation / Aktualisierung von Angular CLI geschrieben. Http://bmnteam.com/angular-cli-installation/

Maksim B.
quelle
0

Führen Sie einfach den folgenden Befehl aus:

ng update

Hinweis: Dies wird nicht global aktualisiert.

Vinay Kumar
quelle
0

So bringe ich es zum Laufen.

Meine Umgebung:

Angular CLI Global: 6.0.0, Local: 1.7.4, Angular: 5.2, Typescript 2.5.3

Hinweis: Zum Aktivieren müssen ng UpdateSie zuerst Angular CLI 6.0 installieren npm install -g @angular/cli or npm install @angular/cli

  1. ng update //update Angular Package core/common/complier... to 6.0.0

  2. ng update @angular/cli //change angular-cli.json to angular.json

Optional, wenn Sie Winkelmaterial 5.4.2, ngx-translate 9.1.1, ng-bootstrap / ng-bootstrap 1.1.1 haben:

  1. ng update @angular/material //upgrade to 6.0.1

  2. npm install @ngx-translate/[email protected] --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/[email protected] //for ng-bootstrap

Wenn Sie Observable verwenden und den Fehler erhalten:

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'.

Veränderung: import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

Zu

import { Observable, of } from "rxjs";

Angular CLI-Problem: https://github.com/angular/angular-cli/issues/10621

Ryan Huang
quelle