Angular 8 Update mit Ng-Update & Angular CLI v8

Blog

Angular 8 Update mit Ng-Update & Angular CLI v8

In diesem Artikel erfahren Sie mehr über die erforderlichen Schritte, die Sie ausführen müssen, um Ihre vorhandenen Angular-Apps entsprechend auf Angular 8 zu migrieren

Upgrade oder Update Eckig 7 to Angular 8 ist jetzt einfacher als je zuvor, dank all der Arbeit, die in Version 8 geleistet wurde, und des ng update-Befehls, mit dem Sie bestimmte Versionen und Abhängigkeiten aktualisieren können.

Winkel 8 wird mit vielen neuen Funktionen für das Kernframework und die anderen Bibliotheken wie Angular Material veröffentlicht. Die neue Version hängt von der neuesten Version von TypeScript und Node ab. Mal sehen, wie wir die CLI aktualisieren können Winkel-CLI 8 und aktualisieren Sie ein vorhandenes Projekt von Version 7 auf Angular 8.

Was ist ein Update?

ng update ist ein Befehl, der über die Angular-CLI verfügbar ist und zum Aktualisieren Ihrer Anwendung und ihrer Abhängigkeiten verwendet wird. Sie können damit alle Pakete im |_+_| . aktualisieren Datei über das |_+_| Option, die true und false oder bestimmte Versionen über die |_+_| . annehmen könnte Möglichkeit. Sie können alle verfügbaren Befehle vom offiziellen sehen Dokumente .

So aktualisieren/aufrüsten auf Angular 8

Für die meisten Anwendungsfälle und dank der in Angular 8 geleisteten Arbeit können Sie mit einem Befehl auf die neueste Version aktualisieren:

package.json

Wenn Sie Probleme haben. Sie können auch überprüfen update.angular.io für mehr Details.

So aktualisieren/aufrüsten auf Angular 7

Weitere Details zum Update-Prozess finden Sie im update.angular.io offizielle Website.

Dank aller Verbesserungen in Angular 6 ist es jetzt einfacher denn je, auf die neueste Version zu aktualisieren.

Shiba Inu Leine Münze

In den meisten Fällen können Sie auf v7 aktualisieren, indem Sie einen einfachen Befehl ausführen:

--all

Wenn Sie noch weitere Details zum Prozess benötigen, folgen Sie den nächsten Abschnitten:

Aktualisieren von Angular 6 auf Angular 7 (Basis-Apps)

Wenn Ihr Projekt einfach ist, können Sie einfach die folgenden Schritte ausprobieren:

  • Zuerst müssen Sie die veralteten Funktionen von RxJS 6 mithilfe der Auto-Update-Regeln von . entfernen rxjs-tslint . Sie müssen das Tool lediglich global mit dem Befehl |_+_| . installieren Befehl dann den Befehl |_+_| . ausführen aus der Wurzel Ihres Projekts. Sobald dies erledigt ist, können Sie die |_+_| . entfernen Bücherei.
  • Schließlich müssen Sie nur noch die |_+_| . ausführen Befehl zum Aktualisieren des Kernframeworks und der CLI auf v7.

Aktualisieren von erweiterten Apps

Wenn Ihr Projekt erweiterte APIs wie HTTP verwendet, müssen Sie das alte |_+_| . ersetzen und die |_+_| service (der in v6 veraltet war) mit dem neuen |_+_| und die |_+_| Service, der viele neue leistungsstarke Funktionen bietet.

Auch wenn Ihre Anwendung den Angular Service-Worker verwendet, müssen Sie alle |_+_| . migrieren zum |_+_| Array.

Abgesehen von dem, was oben erwähnt wurde, müssen Sie für die Migration von v6.1 auf v7 keine Änderungen in Ihrem Projekt vornehmen.

Anleitung für alte Angular-Versionen

Währenddessen Lernprogramm erfahren Sie anhand von Beispielen, wie Sie Ihre Winkel 5 Projekt erstellt von Winkel-CLI benutzen Winkel 6 (Die neueste Version) und Winkel-CLI 6 . Wir begleiten Sie Schritt für Schritt beim Upgrade Ihres bestehenden Winkel 5 Projekte (kann auch angewendet werden auf Winkel 2 oder Winkel 4 ), um die neuesten Angular-Funktionen und -Abhängigkeiten zu verwenden.

Bepro Coin wo zu kaufen

Zusammengefasst sind dies die Schritte:

  • Aktualisieren Sie Ihre Node.js auf Version 8 oder höher, die für Angular 6 erforderlich ist
  • Aktualisieren HTTP zu HttpClient eingeführt in Angular 4.3+
  • Animationsimport aktualisieren von @angular/core zu @angular/animationen
  • Aktualisieren oder installieren Sie die Angular-CLI auf Version 6 global und lokal pro Projekt
  • Zeigt Pakete an, die mit |_+_| . aktualisiert werden müssen
  • Aktualisieren Sie Kernpakete mit |_+_|
  • Aktualisieren Sie das RxJS-Paket mit |_+_|
  • Aktualisieren Sie das Winkelmaterial, falls verwendet, mit |_+_|

Anforderungen

Bevor Sie Ihr Angular 5-Projekt aktualisieren/aktualisieren können, stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen:

  • NodeJS 8+ auf Ihrem Computer installiert
  • Sie verwenden das neue Angular 4.3+ HttpClient und HttpClientModule . Wenn dies nicht der Fall ist, machen Sie sich keine Sorgen, der Prozess ist einfach und transparent, ersetzen Sie einfach HttpModule durch HttpClientModule und verwenden Sie Http mit HttpClient
  • Sie importieren Animationen von @angular/animationen Anstatt von @angular/core

Installieren oder Aktualisieren der Angular CLI auf Version 6

Das Aktualisieren der Angular-CLI ist einfach und Sie müssen die neueste Version von npm mit dem folgenden Befehl installieren:

--packages

Möglicherweise müssen Sie hinzufügen sudo abhängig von Ihrer npm-Konfiguration.

Bild-Upload mit Vorschau

Es versteht sich von selbst, dass Node.js 8+ und NPM auf Ihrem System installiert sein müssen, um Angular CLI 6 installieren und ausführen zu können.

Aktualisieren der Angular 5-CLI auf Version 6 (Methode 2)

Sie können auch die vorherige Angular CLI 5-Version deinstallieren, bevor Sie die neueste Version mit dem folgenden Befehl installieren:

$ ng update @angular/cli @angular/core

Führen Sie als nächstes die |_+_| . aus Befehl global:

$ ng update @angular/cli @angular/core

Aktualisieren von Angular 4|5-Projekten

Beginnen Sie zunächst mit der lokalen Installation der Angular CLI 6 mit dem folgenden Befehl (stellen Sie sicher, dass Sie sich im Stammordner Ihres Projekts befinden):

npm install -g rxjs-tslint

Konfigurationsdateien aktualisieren

Es gibt viele Unterschiede zwischen Angular 4|5 und Angular 6 wie zum Beispiel

  • Angular 6 verwendet |_+_| statt |_+_|.
  • Verschiedene Versionen von Abhängigkeiten in |_+_| usw.

Sie können verschiedene Konfigurationsdateien automatisch aktualisieren, indem Sie den folgenden Befehl aus dem Stammordner des Projekts ausführen:

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

Zu aktualisierende Pakete entdecken

Angular CLI verfügt über ein neues Dienstprogramm, mit dem Sie die |_+_| . Ihres Projekts automatisch analysieren können Datei und zeigt Abhängigkeiten an, die aktualisiert werden müssen.

Verwenden Sie Ihr Terminal aus dem Stammordner Ihres Angular 5-Projekts, führen Sie den folgenden Befehl aus:

rxjs-compat

Dies ist eine Beispielausgabe dieses Befehls:

Angular 8 Update mit Ng-Update & Angular CLI v8

Upgrade von Core-Paketen auf Angular 6

Jetzt müssen Sie die Kernpakete/Abhängigkeiten auf Angular 6 aktualisieren. Führen Sie einfach den folgenden Befehl aus:

ng update @angular/cli @angular/core

Aktualisieren von RxJS

Sie können RxJS mit dem |_+_| . aktualisieren Befehl:

HttpModule

Aktualisieren von Angular 2-Projekten

Wie sieht es nun mit bestehenden Angular 2-Projekten aus, die mit der Angular-CLI generiert wurden?

Sie können sie leicht aktualisieren, um die neuesten Abhängigkeiten zu verwenden, indem Sie diese Anweisungen befolgen:

Überprüfen Sie zuerst Ihre Versionen der installierten Angular CLI und andere Abhängigkeiten mit:

Http

In meinem Fall erhalte ich diese Ausgabe:

HttpClientModule

Da haben wir die neueste Angular CLI global installiert. Wenn Sie versuchen, Ihr Projekt bereitzustellen, erhalten Sie eine Warnung vor einer nicht übereinstimmenden Version:

Sortieren eines Arrays von Objekten Javascript
HttpClient

Als nächstes öffnen Sie Ihr Projekt |_+_| Datei dann ändern Sie die Angular CLI-Version: Sie können die npm-Infoseite für das Angular CLI-Paket hierüber überprüfen Verknüpfung um die neueste Version zu erfahren.

versionedFiles

Löschen Sie als Nächstes Ihr Projekt |_+_| Ordner und führen Sie den folgenden Befehl aus:

files

Sie müssen die Versionen der anderen Abhängigkeiten nicht ändern, die Angular-CLI kümmert sich um das Abrufen der neuesten Versionen.

Mehrfachauswahl Dropdown eckig

Jetzt können Sie erneut nach installierten Versionen suchen mit:

ng update

In meinem Fall erhalte ich diese Ausgabe:

ng update @angular/core

Wie du siehst Winkel 4.3.1 ist installiert.

Abschluss

In diesem Tutorial haben wir Schritt für Schritt gesehen, wie man die Angular CLI auf Version 6 aktualisiert, wie man ein bestehendes aktualisiert Winkel 2 zu Winkel 4 und Angular 4|5 to Winkel 6 .

#eckig #javascript

www.techiediaries.com

Angular 8 Update mit Ng-Update & Angular CLI v8

In diesem Artikel erfahren Sie mehr über die erforderlichen Schritte, die Sie ausführen müssen, um Ihre vorhandenen Angular-Apps entsprechend auf Angular 8 zu migrieren