Schlüsselpunkte
npm install -g @angular/cli@latest installiert ist. HttpModule durch HttpClientModule, um die automatische JSON -Verarbeitung und Unterstützung für HTTP -Interceptors des neuen HTTPClients zu nutzen. rxjs/operators importieren und in der .pipe() -Methode auf die Verwendung von RXJS-Pipetable-Operatoren anwenden. ng serve ausführen und das Attribut ng-version im App-Root-Element überprüfen. In diesem Artikel wird erläutert, wie Angular -Projekte auf die neueste Version aktualisiert werden.
Dieser Artikel ist Teil 6 des SitePoint Angular 2 -Tutorials, in dem beschrieben wird, wie eine CRUD -Anwendung mit der Angular -CLI erstellt wird.
In Teil 1 haben wir gelernt, wie wir unsere Todo -Anwendung aufbauen und ausführen und auf Github -Seiten bereitstellen können. Dies funktioniert großartig, aber leider ist die gesamte Anwendung in eine Komponente gestopft.
In Teil 2 untersuchten wir eine modularere Komponentenarchitektur und lernten, wie man diese einzelne Komponente in einen strukturierten, kleineren Komponentenbaum unterteilt, der leichter zu verstehen, wiederverwendet und aufrechtzuerhalten ist.
In Teil 3 haben wir die Anwendung mit dem REST -API -Backend mit dem HTTP -Dienst von RXJS und Angular aktualisiert.
In Teil 4 führen wir Angular Router vor und erfahren, wie Router unsere Anwendungen aktualisieren, wenn sich die Browser -URL ändert, und wie wir den Router verwenden, um Daten von der Backend -API zu analysieren.
In Teil 5 haben wir der Anwendung Authentifizierung hinzugefügt und gelernt, wie verschiedene Teile der Anwendung vor unbefugtem Zugriff geschützt werden.
Mach dir keine Sorgen! Sie müssen nicht Teil 1, 2, 3, 4 oder 5 dieses Tutorials folgen, um Teil 6 zu verstehen. Sie können einfach eine Kopie unserer Codebasis nehmen, den Code für Teil 5 ansehen und ihn als Ausgangspunkt verwenden. Dies wird unten ausführlicher erläutert.
Um das Ziel von Angular zu aktualisieren, stellen Sie sicher, dass die neueste Version von Angular CLI installiert ist. Wenn nicht, können Sie es mit dem folgenden Befehl installieren:
npm install -g @angular/cli@latest
Wenn Sie die vorherige Version von Angular CLI löschen müssen, können Sie:
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest
benötigen Sie eine Kopie des Codes für Teil 5. Dies ist auf GitHub erhältlich. Jeder Beitrag in dieser Serie enthält ein entsprechendes Tag im Repository, sodass Sie zwischen verschiedenen Zuständen dieser App hin und her wechseln können.
Der Code, den wir am Ende von Teil 5 verwendet haben, und der Code, mit dem wir in diesem Artikel begonnen haben, wird Teil-5 markiert. Der Code, mit dem wir diesen Artikel beendet haben, ist mit Teil 6 gekennzeichnet.
Sie können Tags als Alias für eine bestimmte Commit -ID behandeln. Sie können mit Git Checkout zwischen ihnen wechseln. Hier können Sie mehr darüber lesen.
Um zum Betrieb zu gehen (installieren Sie die neueste Version von Angular CLI), werden wir Folgendes machen:
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-5 npm install ng serve
Besuchen Sie dann die https://www.php.cn/link/d111f133fa0ea545d48291f9b0a72b2d Todo -Anwendung.
In diesem Artikel, wenn wir Angular aktualisieren, werden wir Folgendes lernen:
Am Ende dieses Artikels werden Sie erfahren:
Beginnen wir!
Um ein florierendes Ökosystem zu unterstützen, muss Angular sowohl stabil als auch sich entwickeln.
Einerseits ist Angular so konzipiert, dass er maximale Stabilität für missionskritische Anwendungen bietet. Andererseits muss es angepasst und weiterentwickelt werden, um die neuesten Änderungen der Web -Technologie zu unterstützen.
Daher hat das Angular-Team beschlossen, zeitbasierte Release-Zyklen und semantische Versionen zu verwenden.
Der zeitbasierte Freisetzungszyklus bedeutet, dass wir alle paar Wochen oder Monate erwarten können, dass neue Winkelversionen (Angular 5, Angular 6, Angular 7 usw.) erwarten.
semantische Versionierung von Semantic bedeutet, dass die Versionsnummer von Angular es uns ermöglicht, vorherzusagen, ob unsere Anwendung unterbrochen wird, wenn wir darauf upgraden.
Die semantische Version sieht im Wesentlichen wie folgt aus: Moll -Version.
Daher beträgt der primäre Versionswert von Version V1.3.8 1, der sekundäre Versionswert 3 und der Revisionswert 1.
Wenn eine neue Version veröffentlicht wird, gibt die neue Version implizit die Art der Änderungen an, die am Code vorgenommen wurden.
beim Hinzufügen semantischer Version werden die folgenden Regeln angewendet:
Jedes Inkrement wird in Schritten von 1 numerisch erhöht.
überarbeitete Version wird hinzugefügt, wenn Fehler behoben werden und der Code rückwärts kompatibel bleibt:
npm install -g @angular/cli@latest
Beim Hinzufügen von Funktionen und der Code bleibt rückwärts kompatibel, wird eine Subversion hinzugefügt und die Überarbeitung wird auf Null zurückgesetzt:
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest
Bei der Implementierung von Änderungen, die dazu führen, dass der Code rückwärts inkompatibel wird (auch als Hauptänderung bezeichnet), wird die Hauptversion hinzugefügt und die Nebenversion und die Revision werden auf Null zurückgesetzt:
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-5 npm install ng serve
Wenn Sie mit semantischer Versioning nicht vertraut sind, lesen Sie unbedingt diesen einfachen Semantic Versioning -Handbuch.
Das Angular-Team kombiniert die semantische Versionierung mit zeitbasierten Release-Zyklen und zielt darauf ab,:
Der Veröffentlichungsplan ist nicht in Stein gemeißelt, da es Urlaub oder besondere Ereignisse gibt, aber es ist ein guter Indikator für das, was wir mit den kommenden Veröffentlichungen erwarten können.
Sie können dem offiziellen Angular -Blog und dem offiziellen Änderungsprotokoll folgen, um über die neuesten Entwicklungen auf dem Laufenden zu bleiben.
Ein großer Vorteil der semantischen Versionierung besteht darin, dass wir Winkelanwendungen mit Überarbeitungen oder Subversionen sicher aktualisieren können, ohne uns Sorgen zu machen, unsere Anwendungen zu brechen.
Aber was passiert, wenn eine neue Major -Version erscheint?
Wir haben erfahren, dass Hauptversionen erhebliche Veränderungen führen können. Wenn wir es also aktualisieren, wissen wir, ob unsere vorhandenen Anwendungen brechen werden?
Eine Möglichkeit besteht darin, das offizielle Änderungsprotokoll zu lesen und die Änderungsliste anzusehen.
einfacher ist die Verwendung der Angular -Update -Handbuch, um Winkel zu aktualisieren. Sie können die aktuelle Winkelversion und die Version, auf die Sie aktualisieren möchten, auswählen. Die Anwendung zeigt Ihnen die genauen Schritte an, die Sie ausführen müssen:
Für unsere Angular TODO -Anwendung möchten wir von Angular 4.0 auf Angular 5.0 ein Upgrade durchführen.
Wählen wir die Anwendungskomplexitätsebene Erweitert , damit wir alle möglichen Maßnahmen sehen, die wir ergreifen müssen:
Wir haben einen vollständigen Überblick über alle Schritte erhalten, die wir ausführen müssen, um unsere Anwendung zu aktualisieren.
Großartig!
Vor dem Update Die Liste enthält 12 Elemente. Für unsere Angular TODO -Anwendung ist kein Projekt verfügbar, sodass wir sicher mit dem nächsten Schritt übergehen können.
In der Liste Aktualisieren Sie , nur das letzte Element gilt für unsere Anwendung. Wir müssen unsere Abhängigkeiten aktualisieren. Lassen Sie uns also den vorgeschlagenen Befehl im Projekt des Projekts ausführen:
npm install -g @angular/cli@latest
Weil wir die Angular CLI auf die neueste Version im Abschnitt auf und laufend aktualisiert haben, haben wir auch unsere lokale Version aktualisiert:
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest
aus
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-5 npm install ng serve
nicht startet, löschen Sie Ihr Verzeichnis ng serve und node_modules und führen Sie dann package-lock.json aus, um das Clean npm install -Verzeichnis und die node_modules -Datei neu zu erstellen. package-lock.json
Nach der Aktualisierung enthält vier Elemente, die ersten und letzten gelten für unsere Anwendung:
Schalter von httpmodule zu httpclientModule
Wenn wir die Versionshinweise für Angular Version 5.0.0 überprüfen, werden wir erfahren, dass Angular 4.3 mit einem neuen HTTPClient ausgestattet ist, der die JSON -Antworten automatisch behandelt und HTTP -Interceptors unterstützt.
Es heißt, dass wir, um unseren Code zu aktualisieren, httpmodule durch httpclientModule ersetzen, den HTTPClient -Service injizieren und alle
-Anrufe löschen müssen, da der neue HTTPClient die JSON -Antwort automatisch analysiert. map(res => res.json())
und ersetzen Sie httpmodule: src/app/app.module.ts
<code> v0.0.3 // 修复错误前 v0.0.4 // 修复错误后</code>
<code> v0.2.4 // 添加新功能前 v0.3.0 // 添加新功能后</code>
-Anrufe im Code löschen, da der neue HTTPClient die Antwort für uns automatisch analysiert. map(res => res.json())
Sie müssen also nur eine Datei aktualisieren. Öffnen wir also
und ersetzen Sie: src/app/api.service.ts
<code> v7.3.5 // 实现向后不兼容的更改前 v8.0.0 // 实现向后不兼容的更改后</code>
$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'
$ npm install typescript@2.4.2 --save-exact
genauer gesagt ersetzen wir:
import { Http, Headers, RequestOptions, Response } from '@angular/http'; für import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; Response für HttpErrorResponse Headers für HttpHeaders return new RequestOptions({ headers }); für return { headers }; Wenn wir ausführen:
npm install -g @angular/cli@latest
und navigieren Sie durch den Browser nach https://www.php.cn/link/03e03424a898e574153a10db9a4db79a httpclientmodule.
Es ist Zeit, Projekt 2 zu lösen: Importieren Sie den RXJS -Operator von RXJS/Operatoren und verwenden Sie den RXJS -Pipeline -Operator.
Angular 5 wurde aktualisiert, um RXJS 5.5.2 oder höher zu verwenden.
Beginnend mit Version 5.5 wird RXJS mit einem leitbaren Bediener geliefert. Das offizielle Dokument besagt:
leitbarer Operator ist eine Funktion, die eine Funktion mit der folgenden Signatur zurückgibt:
<T, R>(source: Observable<T>) => Observable<R>…
Sie extrahieren alle erforderlichen Operatoren aus einer Position (unter
rxjs/operators(Plural!). Es wird auch empfohlen, die beobachtbare Erstellungsmethode, die Sie unten benötigen, direkt den Gebrauchsumfang zu extrahieren:
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latestNach dem Login kopierenNach dem Login kopierenNach dem Login kopierenNach dem Login kopieren
Obwohl dies kompliziert klingt, bedeutet es grundsätzlich, wo wir zuvor gekettete Methoden verwendet haben:
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-5 npm install ng serve
Wir sollten jetzt Operatoren aus rxjs/operators importieren und sie mit der Methode .pipe() anwenden:
<code> v0.0.3 // 修复错误前 v0.0.4 // 修复错误后</code>
Die Hauptvorteile der leitbaren Betreiber sind:
.pipe() -Methode minimiert die Auswirkungen auf unseren Code.
Es gibt zwei Projekte in unserer Anwendung, die neu ausgerichtet werden müssen: unser Apiservice und unser Todoscomponent.
Öffnen wir zuerst src/app/api.service.ts, um unseren Apiservice zu aktualisieren:
<code> v0.2.4 // 添加新功能前 v0.3.0 // 添加新功能后</code>
importieren wir den rxjs/operators pipaTable -Operator aus map und aktualisieren alle Vorkommen von map(fn) auf pipe(map(fn)).
Nächst
src/app/todos/todos.component.ts
<code> v7.3.5 // 实现向后不兼容的更改前 v8.0.0 // 实现向后不兼容的更改后</code>
und aktualisieren Sie rxjs/operators nach map. map(fn)
pipe(map(fn)) Das ist es! Die angeketteten Betreiber in unserer Anwendung wurden von reduzierbaren Betreibern ersetzt, genau wie die Angular Update Guide uns anweist.
Wenn wir zu https://www.php.cn/link/668c7d9d4728fc9eebbe7a8202c95c26 navigieren.
Um zu überprüfen, ob wir tatsächlich Angular 5 ausführen, können wir den Elementinspektor öffnen:
Angular fügt die ng-version Eigenschaft app-root mit dem Wert der ausgeführten Version hinzu. Wir sehen ng-version="5.2.9", was darauf hinweist, dass wir Angular 5.2.9 ausführen.
Die Mission ist abgeschlossen! Unsere Anwendung wurde erfolgreich auf Angular 5.2.9 aktualisiert.
Wir behandeln viel, also lasst uns überprüfen, was wir gelernt haben.
Im ersten Artikel haben wir gelernt, wie:
a todolistfotercomponent, um zu zeigen, wie viele Todos übrig sind.
Erstellen Sie einen ApimockService, um beim Ausführen von Unit -Tests tatsächliche HTTP -Aufrufe zu vermeiden.
So verwenden Sie einen Parser, um den Analyse von Drehrouter analysieren zu lassen.
Im fünften Artikel haben wir gelernt:In diesem Artikel über die Aktualisierung von Angular haben wir gelernt:
ng-version
ng update In der bevorstehenden Veröffentlichung führt die Angular CLI den Befehl
Vor diesem Fall können Sie diesen Artikel als Anleitung zum Aktualisieren von Angular -Anwendungen auf die neueste Version verwenden.
Alle Code in diesem Artikel finden Sie in GitHub.
Ich wünsche Ihnen alles Gute!
node -v Bevor Sie mit der Aktualisierung Ihres Winkelprojekts beginnen, stellen Sie sicher, dass die neuesten Versionen von Node.js und NPM installiert sind. Sie können Ihre Version durch Ausführen von npm -v und npm install -g @angular/cli im Terminal überprüfen. Wenn Sie nicht installiert sind oder Ihre Version abgelaufen ist, besuchen Sie bitte die offizielle Node.js -Website, um sie herunterzuladen und zu installieren. Stellen Sie außerdem sicher, dass Ihre Winkel -CLI die neueste Version ist. Sie können es aktualisieren, indem Sie
ng update Um Ihr Winkelprojekt auf eine bestimmte Version zu aktualisieren, können Sie den Befehl ng update @angular/core@9 @angular/cli@9, gefolgt von der Paketnamen und der Versionsnummer. Wenn Sie beispielsweise auf Angular 9 aktualisieren möchten, werden Sie in Ihrem Terminal
Wenn Sie während des Aktualisierungsprozesses auf einen Fehler stoßen, versuchen Sie zuerst, die Fehlermeldung zu verstehen. Es enthält normalerweise Hinweise darauf, wo es schief gelaufen ist. Wenn Sie das Problem nicht lösen können, sollten Sie nach Hilfe der Angular -Community suchen. Es gibt viele erfahrene Entwickler auf Websites wie Stackoverflow, die Ihnen helfen können, Probleme zu beheben. Denken Sie daran, so viele Details für Ihr Problem wie möglich zu geben, einschließlich Fehlermeldungen und Schritten, die Sie unternommen haben, bevor Sie auf einen Fehler stoßen.
Ein Downgrad eines Winkelprojekts in eine frühere Version kann etwas schwierig sein, da es normalerweise mehr als nur die Versionsnummer in der package.json -Datei ändert. Möglicherweise müssen Sie auch andere Abhängigkeiten herabstufen und Ihren Code optimieren, um ihn mit älteren Versionen kompatibel zu machen. Wenn Sie eine Herabstufung benötigen, sollten Sie Hilfe bei der Angular -Community suchen oder einen professionellen Entwickler einstellen, um sicherzustellen, dass der Prozess reibungslos verläuft.
Das Angular -Team enthält detaillierte Versionshinweise für jedes Update auf seiner offiziellen Website. Diese Anweisungen enthalten eine Zusammenfassung der in den Aktualisierung, Fehlerbehebungen und neuen Funktionen eingeführten Änderungen. Sie können den Befehl --dry-run auch mit der Option ng update verwenden, um festzustellen, welche Änderungen in Ihrem Projekt vorgenommen werden, ohne sie tatsächlich anzuwenden.
Prüfen Sie nach der Aktualisierung des Winkelprojekts unbedingt gründlich, um sicherzustellen, dass alles wie erwartet funktioniert. Sie können die integrierten Testwerkzeuge der Angular-CLI wie Karma und Prognose verwenden, um Unit-Tests und End-to-End-Tests in Ihrem Projekt durchzuführen. Wenn Sie Probleme haben, beziehen Sie sich auf die Fehlermeldungen und die Winkeldokumentation, um sie zu beheben.
Die Häufigkeit von Aktualisierungen hängt von den spezifischen Anforderungen des Projekts und der Stabilität der von Ihnen verwendeten Winkelversion ab. Es ist jedoch in der Regel am besten, die neueste stabile Version zu verwenden, um die aktuellen Funktionen und Verbesserungen zu nutzen. Denken Sie daran, Ihr Projekt nach jedem Update gründlich zu testen, um sicherzustellen, dass alles wie erwartet noch funktioniert.
Ja, Versionen können beim Aktualisieren von Winkelprojekten übersprungen werden. Es wird jedoch empfohlen, jeweils eine Hauptversion zu aktualisieren, um potenzielle Probleme zu vermeiden. Wenn Sie von einer sehr alten Version aktualisiert werden, sollten Sie sich die Hilfe der Angular -Community wenden oder einen professionellen Entwickler einstellen, um sicherzustellen, dass der Prozess reibungslos verläuft.
Aktualisieren Sie das Angular -Projekt, um von den neuesten Funktionen, Verbesserungen und Fehlerbehebungen zu profitieren. Es hilft auch, Ihr Projekt sicher und kompatibel mit anderen modernen Technologien zu halten. Denken Sie jedoch daran, Ihr Projekt nach jedem Update gründlich zu testen, um sicherzustellen, dass alles immer noch wie erwartet funktioniert.
Sie können Continuous Integration -Tools (CI) wie Jenkins oder Travis CI verwenden, um den Aktualisierungsprozess von Winkelprojekten zu automatisieren. Diese Tools können den Befehl ng update und Ihre Tests automatisch ausführen, wenn Sie Änderungen in das Repository drücken. Dies kann dazu beitragen, dass Ihr Projekt immer auf dem neuesten Stand ist und ordnungsgemäß funktioniert.
Das obige ist der detaillierte Inhalt vonSo aktualisieren Sie Winkelprojekte auf die neueste Version. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was ist eine .Xauthority-Datei?
Was ist das Dateiformat von mkv?
Mein Computer kann es nicht durch Doppelklick öffnen.
Einführung in die Gründe, warum der Remote-Desktop keine Verbindung herstellen kann
So führen Sie Python in vscode aus
So lösen Sie devc-chinesische verstümmelte Zeichen
Vergleichen Sie die Ähnlichkeiten und Unterschiede zwischen zwei Datenspalten in Excel
Der Unterschied zwischen Heap und Stack
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
