it-swarm.com.de

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

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

Laut mir 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 entsprechend Ivy ändern?

113
Abhishek Chokra

Upgrade von Angular v6 auf Angular v7

Version 7 von Angular wurde veröffentlicht Offizieller Angular Blog-Link . Detaillierte Informationen finden Sie im offiziellen angular Update-Handbuch https://update.angular.io . Diese Schritte funktionieren für einfache 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. Detaillierte Informationen finden Sie auf der offiziellen Website https://update.angular.io .

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

  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 auf die neue angular.json formatieren, indem Sie Folgendes ausführen:

    npm install -g @angular/cli  
    npm install @angular/cli  
    ng update @angular/cli
    
  3. Aktualisieren Sie alle 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 bringt das Abwärtskompatibilitätspaket rxjs-compat, das Ihre Anwendungen am Laufen hält. Sie sollten jedoch den TypeScript-Code umgestalten, damit er nicht von rxjs-compat abhängt. Führen Sie die folgenden Schritte aus, um den 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- compat, da dies die Paketgröße erhöht. Weitere Informationen finden Sie in diesem RxJS-Upgrade-Handbuch .

    npm uninstall rxjs-compat
    
  6. Führe ng serve aus, um es zu überprüfen.
    Wenn Sie Fehler im Build erhalten, lesen Sie https://update.angular.io für 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 sollten Sie zuerst Ihren Code mit der neuesten RxJS-Version kompatibel machen.

  2. Aktualisieren Sie die NodeJS-Version auf 8.9+ (dies ist in der angular cli 6-Version erforderlich).

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

    npm uninstall -g @angular/cli
    npm cache verify
    

    wenn npm version <5 ist, dann benutze npm cache clean

    npm install -g @angular/[email protected]
    
  4. Ändern Sie angular Paketversionen 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 Angular des lokalen 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/[email protected]
    npm install 
    
  6. Das Angular CLI-Konfigurationsformat wurde von angular CLI 6.0.0-RC.2 geändert, und Ihre vorhandene Konfiguration kann automatisch aktualisiert werden, indem der folgende Befehl ausgeführt wird. Es wird die alte Konfigurationsdatei . Angular-cli.json entfernen und eine neue angular.json Datei schreiben.

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

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

npm install [email protected]
270
Ashish Jain

Angular 6 wurde gerade veröffentlicht.

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

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

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

Möglicherweise müssen Sie Ihre Ausführungsskripte in package.json aktualisieren. Wenn Sie Flags wie "app" und "environment" verwenden, wurden diese auf "project" bzw. "configuration" aktualisiert.

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

19
Arjun Shankar

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

Upgrade angular

https://update.angular.io/

15
Valentin Despa

Überprüfen Sie die Upgrade-Details Schritt für Schritt von Angular 5 auf Angular 6. Hier finden Sie Informationen zu Problemen, die während des Upgrades auftreten, und Informationen zu deren Behebung.

  • Aktualisieren Sie Ihre Knotenversion auf 8 oder höher und installieren Sie Angular cli global bis npm i -g @ angular/cli @ latest.
  • Angular 6 verwendet angle.json als Konfigurationsdatei anstelle von .anguar-cli.json. 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 vorhandene Konfiguration in eine neue Konfigurationsdatei verschieben.
  • Erstellen Sie dazu ein weiteres Dummy-Projekt mit der neuesten Version, indem Sie das neue Projekt und die gleichen 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 von Ihrer aktuellen Version von Angular → Angular geändert wurde wie man sie ändert/repariert.
  • Befolgen Sie die obigen Schritte und kopieren/aktualisieren Sie die in Schritt 2 erstellte Datei angular.json. Führen Sie npm i in Ihrem Projekt aus, um alle Abhängigkeiten abzurufen und npm update auszuführen
  • Jetzt kommt der große Teil. RxJS-Upgrade und Beheben von Konflikten. RxJS hat mit dieser Version den Import von Operatoren und beobachtbaren Erstellern standardisiert. Führen Sie npm i -g rxjs-tslint aus und fügen Sie die unten stehende Konfiguration 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. Dies behebt nur wenige Probleme, die meisten verbleibenden Probleme werden jedoch hervorgehoben und müssen manuell behoben werden.

Änderung des Betreibernamens:

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

Alle Operatoren wurden zu rxjs/operator verschoben.

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:) Informationen zum Upgrade finden Sie in meinem Blog-Beitrag hier

8
Uday Vunnam

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

4
Kris Bonev

Vollständiger Leitfaden

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

1. Aktualisieren Sie die CLI global und lokal

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

    npm uninstall -g @angular/cli npm cache clean npm install -g @angular/[email protected] 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

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

Normalerweise würde dies bedeuten, dass Sie Ihren Code überall dort aktualisieren müssen, wo RxJS-Importe und -Operatoren verwendet werden.

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 entferne rxjs-compat

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

Verweisen Sie auf diesen Link https://alligator.io/angular/angular-6/


------------------- Ohne eckige Kli -------------------------

Sie müssen also Ihre package.json -Datei manuell aktualisieren.

package.json screenshoot of upgrade packages

Dann renne

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json
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-compat (Um ältere Versionen von rxjs 5.6 zu unterstützen)
  4. npm install -g rxjs-tslint (Um das Format von rxjs 5 auf rxjs 6 im Code zu ändern. Global installieren 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 rxjs6-Format ändern)
  6. npm deinstalliere rxjs-compat (Entferne dies endlich)
2
user2716958

Wie Vinay Kumar darauf hinwies, 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/[email protected]

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

Es gibt keine wesentlichen Änderungen in Angular selbst, aber sie befinden sich in RxJS. Vergessen Sie daher nicht, die mit rxjs kompatible Bibliothek zu verwenden, um mit altem 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/

1
Maksim B.

führen Sie einfach den folgenden Befehl aus:

ng update

hinweis: Dies wird nicht global aktualisiert.

0
Vinay Kumar

So lasse ich es funktionieren.

Meine Umgebung:

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

Hinweis: Um ng Update zu aktivieren, müssen Sie Angular CLI 6.0 zuerst npm install -g @angular/cli or npm install @angular/cli installieren.

  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 Eckmaterial 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'.

Ä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

0
Ryan Huang

Das Upgrade von 2/4/5 auf Angular 6 ist in wenigen Schritten erledigt.

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/[email protected]
npm install

So beheben Sie das mit "angular.json" verbundene Problem:

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 wird dir helfen :)

0
aditya kumar