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

Bearbeiten am 07-Mai-2018 :
Version 6 der Winkel wurde veröffentlicht Offizielle Kantige blog-link.
Habe ich erwähnt, die Allgemeinen upgrade-Schritte, sondern auch vor und nach dem update müssen Sie änderungen in Ihren code, um es praktikabel, im v6, für detaillierte Informationen besuchen Sie die offizielle website https://update.angular.io .

Upgrade Schritte :

1. Stellen Sie sicher, NodeJS version 8.9+ wenn nicht, aktualisieren Sie es.

2. Update Winkel-cli Global und lokal, und die Migration der alten Konfiguration .Winkel-cli.json der neuen eckig.json - format mit den folgenden :

   npm install-g @eckig/cli
   
   npm install @eckig/cli
   
   ng-update @eckig/cli

3. Update alle Ihre Winkel-framework-packages v6,und die richtige version
   der RxJS und Typoskript durch ausführen der folgenden:

   ng update @eckig/core

4. Update Eckig Material auf die neueste version durch ausführen der folgenden:

   ng update @eckig/material

5. RxJS v6 hat größere änderungen von v5, v6 bringt die Abwärtskompatibilität Paket rxjs-compat, die halten Ihre Anwendungen arbeiten, aber Sie sollten umgestalten Typoskript-code, so dass es nicht davon abhängig, rxjs-compat. Umgestalten, Typoskript-code ausführen folgenden:

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

   Beachten Sie :- Sobald alle Ihre Abhängigkeiten aktualisiert wurden RxJS 6, entfernen rxjs-
   compat denn es erhöht die bundle-Größe. sehen Sie sich bitte die RxJS Upgrade-Anleitung für mehr info.

   npm deinstallieren rxjs-compat

6. Fertig ausführen ng serve um es zu überprüfen.
   
   Wenn Sie Fehler in build beziehen https://update.angular.io für die ausführliche info.

Bearbeiten am 20-Apr-2018 :
Aktualisiert eckige version auf 6.0.0-rc.5 und Hinzugefügt, Schritt 6 für Winkel-CLI-Konfiguration-format verpasst.

1. Upgrade rxjs auf 6.0.0-beta.0, finden Sie auf dieser RxJS Upgrade-Anleitung für mehr info. RxJS v6 hat zu brechen ändern Sie daher zuerst Ihren code kompatibel zu den neuesten RxJS version.

2. Update NodeJS version 8.9+ (dies ist erforderlich, durch Winkel-cli version 6)

3. Update Winkel-cli global-Paket an der nächsten version.

   npm uninstall -g @angular/cli
   npm cache verify
   

   wenn npm version < 5 verwenden Sie anschließend npm cache clean

   npm install -g @angular/cli@next
   

4. Ändern eckige Pakete, - Versionen im Paket.json-Datei zu ^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ächsten update Winkel-cli lokalen Paket zur nächsten version und installieren Sie die 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. Den Winkel-CLI-Konfiguration-format wurde geändert von Winkel-cli-6.0.0-rc.2-version, und Ihre vorhandene Konfiguration automatisch aktualisiert werden können, indem Sie den folgenden Befehl ausführen. Es wird entfernen Sie die alte config-Datei .Winkel-cli.json und schreiben, neue eckig.json Datei.

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

Hinweis :- Wenn Sie folgende Fehlermeldung "Der Angular Compiler erfordert Typoskript >=2.7.2 und <2.8.0 aber 2.8.3 fand statt". führen Sie folgenden Befehl aus :

npm install [email protected]

InformationsquelleAutor der Antwort Ashish Jain

Nutzen Sie einfach das offizielle upgrade-Anleitung, die Ihnen sagen, was Sie tun müssen, um für Ihre eigenen speziellen Bedürfnisse:

https://update.angular.io/

InformationsquelleAutor der Antwort Valentin Despa

Überprüfen Sie die Schritt für Schritt durch den upgrade-Informationen von Winkel 5 Winkel 6. Diese enthält details über die Probleme, die Sie stoßen während des Upgrades, und wie Sie zu lösen sind.

• Aktualisieren Sie Ihren Knoten version 8 oder höher, und Installieren Sie Eckige cli neuesten
  Global npm i-g @eckig/cli@neueste.
• Winkel 6 verwendet eckig.json Konfigurations-Datei statt .anguar-cli.json. Auch tslint geändert wurde. Überprüfen Sie https://github.com/angular/angular-cli/wiki/angular-workspace für
  neuesten Informationen zu Konfiguration. Sie haben sich zu bewegen, Ihre vorhandenen
  Konfiguration neue Konfiguration-Datei.
• Dies zu tun, erstellen Sie einen anderen
  dummy-Projekt mit den neuesten cli mit ng neue 'Projekt' und der gleichen
  Standardwerte wie Präfix, Stil etc., die Sie früher für Ihr Projekt.
  Neues Projekt erstellen mit cli
  https://github.com/angular/angular-cli/wiki/new
• Verwenden
  https://update.angular.io/ zu überprüfen, was geändert wurde, von Ihrem
  aktuelle version der Winkel - → Eckige 6. Es bietet die Verwendung von wie
  ändern/beheben.
• Die oben beschriebenen Schritte und kopieren/aktualisieren
  eckig.json-Datei erstellt, die in step2. Tun npm, die ich in Ihr Projekt zu bekommen
  alle Abhängigkeiten und machen npm update
• Jetzt kommt der große Teil. RxJS
  aktualisieren Sie und lösen von Konflikten. RxJS vereinheitlicht die Einfuhr von
  Operatoren und Observable-Ersteller mit dieser Version. Tun npm i-g
  rxjs-tslint und füge unten lint-Konfiguration in tslint.json

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

• Jetzt ausführen ng lint --fix. Dieser behebt einige Elemente, aber die meisten der verbleibenden Probleme werden hervorgehoben und Sie müssen es manuell zu beheben.

Betreiber Name ändern:

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

Alle Operatoren verschoben rxjs/Betreiber

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

Beobachtbaren Schöpfung Methoden verschoben werden rxjs

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

Sie sind alle gesetzt. Willkommen zu Eckig 6 🙂
Überprüfen Sie mein blog-post hier auf, wie Sie ein upgrade

InformationsquelleAutor der Antwort uday kumar

Bitte führen Sie die unten Kommentare zu update für Winkel 6 Winkel 5

1. ng update @eckig/cli
2. ng update @eckig/core
3. npm installieren rxjs-compat (zur Unterstützung von älteren version rxjs 5.6 )
4. npm install-g rxjs-tslint (ändern von rxjs 5 bis rxjs 6-format im code. Installieren Sie Global nur dann wird die Arbeit)
5. rxjs-5--6-Migration -p src/tsconfig.app.json (Nach der Installation müssen wir ändern es in unserem Quellcode zu rxjs6-format)
6. npm deinstallieren rxjs-compat (Entfernen Sie diese endlich)

InformationsquelleAutor der Antwort user2716958

-----------------Mit Winkel-cli--------------------------

1. Update CLI-Global und lokal

1. Mithilfe von NPM ( stellen Sie sicher, dass Sie Knoten version 8+ )

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

2. Mit Garn

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

2.Update Abhängigkeiten

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

Winkel 6 hängt nun davon ab, Typoskript 2.7 und RxJS 6

Normalerweise würde das bedeuten, dass Sie müssen aktualisieren Sie Ihren code überall RxJS Importe und Operatoren werden verwendet, aber zum Glück gibt es ein Paket, das kümmert die meisten der schweren lifting:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

Dann können Sie rxjs-5--6-Migration

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

schließlich entfernen rxjs-compat

npm uninstall rxjs-compat

//or using Yarn

yarn remove rxjs-compat

Unter diesem link https://alligator.io/angular/angular-6/

-------------------Ohne angular-cli-------------------------

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

Führen

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

InformationsquelleAutor der Antwort bereket gebredingle

einfach den folgenden Befehl ausführen:

ng update

Hinweis: dadurch wird das update nicht Global.

InformationsquelleAutor der Antwort Vinay Kumar