Ü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
