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?

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]

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/ .

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

https://update.angular.io/

Ü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

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

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)

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 .

Dann renne

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

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/

Führen Sie einfach den folgenden Befehl aus:

ng update

Hinweis: Dies wird nicht global aktualisiert.

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:

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

4. 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

Es gibt nur wenige Schritte, um 2/4/5 auf Angular 6 zu aktualisieren.

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

So beheben Sie das Problem im Zusammenhang mit "angle.json": -

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

Speichern Sie MIGRATION
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

RXJS MIGRATION
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Ich hoffe das hilft dir :)