Wie aktualisiere ich Angular 7/8 auf Angular 9?

Blog

Wie aktualisiere ich Angular 7/8 auf Angular 9?

In diesem Tutorial sehen wir Schritt für Schritt, wie Sie ein Angular 7/8-Beispielprojekt auf die neueste Angular 9-Version aktualisieren.



  • Schritt 1 - Klonen des Projekts von GitHub
  • Schritt 2 - Identifizieren der verwendeten Angular-Version im Projekt
  • Schritt 3 – Identifizieren, wie Sie ein Upgrade durchführen
  • Schritt 4 - Aktualisieren von Angular 7 auf v8
  • Schritt 5 - Aktualisieren von Angular v8.2.3 auf die neueste Vorabversion von Angular 9
  • Schritt 6 – Bereitstellung der App

Schritte zum Upgrade von Angular 7 auf Angular 9

Wir haben zuvor eine Tutorial-Reihe zum Erstellen einer Portfolio-Webanwendung mit Angular 7 und Firebase gestartet. Bevor wir mit der Entwicklung unserer App fortfahren, aktualisieren wir sie auf Angular 9.

Schritt 1 - Klonen des Projekts von GitHub

Beginnen wir mit dem ersten Schritt, in dem wir das Angular 7-Projekt aus dem GitHub-Repository klonen.



Öffnen Sie eine neue Befehlszeilenschnittstelle und führen Sie den folgenden Befehl aus:

$ git clone https://github.com/techiediaries/angular-portfolio

Navigieren Sie als Nächstes zum Ordner Ihres Projekts und installieren Sie die Abhängigkeiten des Projekts mit den folgenden Befehlen:



reagieren nativ schnell Bild
$ cd angular-portfolio $ npm install

Schritt 2 - Identifizieren der verwendeten Angular-Version im Projekt

Gehen Sie zurück zu Ihrer Befehlszeilenschnittstelle und führen Sie den folgenden Befehl aus:

$ ng version

Sie erhalten die folgende Ausgabe:

Your global Angular CLI version (9.0.0-rc.2) is greater than your local version (7.1.4). The local Angular CLI version is used. To disable this warning use 'ng config -g cli.warnings.versionMismatch false'. Angular CLI: 7.1.4 Node: 10.16.3 OS: win32 ia32 Angular: 7.1.4 ... animations, cli, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router Package Version ----------------------------------------------------------- @angular-devkit/architect 0.11.4 @angular-devkit/build-angular 0.11.4 @angular-devkit/build-optimizer 0.11.4 @angular-devkit/build-webpack 0.11.4 @angular-devkit/core 7.1.4 @angular-devkit/schematics 7.1.4 @ngtools/webpack 7.1.4 @schematics/angular 7.1.4 @schematics/update 0.11.4 rxjs 6.3.3 typescript 3.1.6 webpack 4.23.1

Dies zeigt an, dass in unserem Projekt die Angular CLI v7.1.4 verwendet wird und die lokale Version anstelle der globalen Version (v9.0.0-rc.2) verwendet wird, die wir bereits auf unserem System installiert haben.

Schritt 3 – Identifizieren, wie Sie ein Upgrade durchführen

Das Angular-Team machte das Upgrade viel einfacher als zuvor. Sie können die Befehle abrufen, die Sie ausführen müssen, um Ihr Projekt von einer Angular-Version auf eine andere zu aktualisieren, indem Sie die Angular-Update-Anleitung .

Gehen Sie zu diesem interaktiven Handbuch und geben Sie 7.1.4 als aktuelle Version und die Zielversion v9.0.0-rc.2 an und klicken Sie auf Zeigen Sie mir, wie man aktualisiert! Taste

Nach Angabe der Versionen erhalten Sie einen Warnhinweis Wir empfehlen nicht, zwischen mehreren Hauptversionen zu wechseln. da wir von v7 auf v9 umsteigen:

Datenpipelines mit Apache Airflow PDF-Download

Wir werden diese Warnung berücksichtigen und unser Projekt zunächst von Angular 7 auf Angular 8 aktualisieren.

Ändern Sie also die Zielversion auf v8.0

Es zeigt Ihnen eine Liste der Dinge, die Sie tun müssen:

Notiz : Das Tool zeigt an, dass bei Verwendung des Legacy-Elements |_+_| und die |_+_| Service in unserem Projekt müssen wir zu |_+_| . wechseln und die |_+_| Service, aber wir nutzen nicht |_+_| In diesem Projekt.

Schritt 4 - Aktualisieren von Angular 7 auf v8

Angular 8 verwendet TypeScript 3.4, Lesen Sie mehr über Fehler, die durch eine verbesserte Typprüfung entstehen können .

Stellen Sie sicher, dass Sie verwenden Knoten 10 oder höher .

Führen Sie in Ihrer Befehlszeilenschnittstelle den folgenden Befehl aus:

HttpModule

Dies analysiert die |_+_| Datei Ihres Projekts und geben Ihnen eine Liste der Pakete, die Sie mit den erforderlichen Befehlen aktualisieren müssen:

Http

Beginnen wir also mit der Aktualisierung des Kernframeworks und der CLI auf v8.2.14 und v8.3.19 jeweils mit folgendem Befehl:

bester Editor für eckige 2
HttpClientModule

Dadurch werden das Kernframework und die CLI auf Angular 8 aktualisiert:

HttpClient

Notiz : Unter Windows musste ich |_+_| . ausführen nach |_+_| um die neuen Versionen der Abhängigkeiten zu installieren.

Lassen Sie uns nun die neue Version von Angular mit dem folgenden Befehl überprüfen:

Http

Dies ist die Ausgabe des Befehls:

Wo ist mein Roku-Link-Code?
$ ng update

Sie können sehen, dass wir Angular CLI erfolgreich auf . aktualisiert haben v8.3.19 , Eckig zu v8.2.14 und verschiedene Kernpakete. Sogar TypeScript wird angestoßen v3.5.3 .

Schritt 5 - Aktualisieren von Angular v8.2.3 auf die neueste Vorabversion von Angular 9

Nachdem wir unser Projekt auf Angular 8 aktualisiert haben, werden wir es auf die neueste Angular 9-Version aktualisieren.

Gehen Sie zurück zu Ihrem Terminal und führen Sie |_+_| . aus Befehl wieder. Sie erhalten folgende Ausgabe:

package.json

Dies liegt daran, dass Angular 9 noch in der RC-Version ist, dh in der Vorabversion, aber das Tool bietet nur stabile Versionen.

Wenn Sie Vorabversionen erhalten möchten, müssen Sie |_+_| . verwenden Flagge wie folgt:

We analyzed your package.json, there are some packages to update: Name Version Command to update -------------------------------------------------------------------------------- @angular/cli 7.1.4 -> 8.3.19 ng update @angular/cli @angular/core 7.1.4 -> 8.2.14 ng update @angular/core rxjs 6.3.3 -> 6.5.3 ng update rxjs There might be additional packages that are outdated. Run 'ng update --all' to try to update all at the same time.

Und das ist die Ausgabe:

$ ng update @angular/cli @angular/core

Als Nächstes können Sie mit dem folgenden Befehl auf die neuesten Versionen der CLI und des Core-Frameworks aktualisieren:

Updating package.json with dependency @angular/compiler @ '8.2.14' (was '7.1.4')... Updating package.json with dependency @angular/language-service @ '8.2.14' (was '7.1.4')... Updating package.json with dependency @angular/forms @ '8.2.14' (was '7.1.4')... Updating package.json with dependency @angular/platform-browser @ '8.2.14' (was '7.1.4')... Updating package.json with dependency @angular/platform-browser-dynamic @ '8.2.14' (was '7.1.4')... Updating package.json with dependency @angular/cli @ '8.3.19' (was '7.1.4')... Updating package.json with dependency @angular/animations @ '8.2.14' (was '7.1.4')... Updating package.json with dependency @angular/common @ '8.2.14' (was '7.1.4')... Updating package.json with dependency zone.js @ '0.9.1' (was '0.8.26')... Updating package.json with dependency rxjs @ '6.5.3' (was '6.3.3')... Updating package.json with dependency @angular/router @ '8.2.14' (was '7.1.4')... Updating package.json with dependency @angular/core @ '8.2.14' (was '7.1.4')... Updating package.json with dependency @angular/compiler-cli @ '8.2.14' (was '7.1.4')... Updating package.json with dependency typescript @ '3.5.3' (was '3.1.6')...

In meinem Fall hatte ich einen Fehler mit der Aussage Repository ist nicht sauber. Bitte übernehmen oder speichern Sie alle Änderungen vor der Aktualisierung .

bigquery Pivot-Zeilen zu Spalten

Es scheint, dass dies eine Art von a . ist Insekt die du mit dem |_+_| . lösen kannst Flagge:

npm install

Unser Projekt wurde erfolgreich auf Angular 9 aktualisiert. Dies ist die Ausgabe des Befehls:

ng update @angular/cli @angular/core

Schritt 6 – Bereitstellung der App

Sie können sehen, ob Ihre Anwendung noch funktioniert, indem Sie sie einfach bereitstellen:

$ ng --version

Abschluss

In diesem Tutorial haben wir Schritt für Schritt gesehen, wie wir unser altes Angular 7-Projekt auf Angular 8 und schließlich auf Angular 9 aktualisieren.

#Angular #JavaScript #Web-Entwicklung