Kennen Sie alle wichtigen Funktionen und Updates

Angular, ein auf Typoskripten basierendes Webanwendungs-Framework, ist eine der brillantesten Kreationen von Google. Es hat seine neueste Version veröffentlicht, nämlich Angular 14. Hier werden wir darüber sprechen, was Angular 14 für Angular-Entwickler in Bezug auf Updates und Funktionen gebracht hat. Fangen wir ohne weitere Verzögerung damit an.

Was ist neu in Angular 14?

Lassen Sie uns zuerst sehen, was die Veröffentlichung von Angular 14 für uns alle neu gebracht hat:

Eigenständige Komponenten werden den Angular-Entwicklungsprozess vereinfachen

Standalone-Komponenten optimieren lediglich das Authoring von Angular-Anwendungen, indem sie die Anforderungen an NgModule verringern. In Angular 14 befinden sich eigenständige Komponenten in der Entwicklervorschau. Sie sind dann alle bereit, in Ihren Anwendungen für den Prozess der Entwicklung und Exploration verwendet zu werden.

Es besteht jedoch die Möglichkeit, dass die API nicht stabil ist und sich außerhalb der regulären Abwärtskompatibilitätsstrategie ändern könnte.

Und das Framework wird weiterhin Schemata erstellen (z. B. ng new – Standalone) sowie die Anwendungsfälle und den Lernweg für dieses aktualisierte, optimierte mentale Modell dokumentieren.

Typisierte Winkelformen

Angular 14 macht Schluss mit Angular Top GitHub-Problem die strikte Typisierung für das Angular Reactive Forms Package implementiert.

Typisierte Winkelformen

Typisierte Formulare stellen sicher, dass die Werte in Formularsteuerelementen, Gruppen und Arrays auf der gesamten API-Oberfläche typsicher sind. Dies ermöglicht sicherere Formulare, insbesondere für tief verschachtelte komplexe Fälle.

Diese Funktion wurde speziell für öffentliche Anfragen nach Kommentaren und Designüberprüfungen entwickelt und basiert auf früheren Prototypen, Arbeiten und Tests von Mitwirkenden der Angular-Community, darunter Sonu Kapoor, Netanel Basel und Cédric Exbrayat.

Update-Schemata helfen bei der schrittweisen Migration zu typisierten Formularen, indem sie es Ihnen ermöglichen, Eingaben zu vorhandenen Formularen moderat hinzuzufügen, zusammen mit vollständiger Abwärtskompatibilität.

Erweiterte Entwicklerdiagnose

Die neue erweiterte Diagnose wurde entwickelt, um Ihnen ein erweiterbares Framework bereitzustellen, das Ihnen mehr Einblick in Ihre Vorlagen gibt und zeigt, wie Sie sie verbessern können.

Diagnose

Diagnosen rendern Kompilierzeit-Warnungen mit genauen, umsetzbaren Vorschlägen für Ihre Vorlagen und fangen Fehler vor der Laufzeit ab.

Optimierte Best Practices

Hier ist Angular 14 bereit, Ihnen dabei zu helfen, etwas zu erleben, das absolut darauf ausgelegt ist, dass Sie sich wohl fühlen.

Beginnend mit neuen Anweisungen zur Änderungserkennung auf angle.io verfügt Angular v14 über integrierte Tools, mit denen Entwickler Anwendungen in Premiumqualität erstellen können, vom Routing bis zu Ihrem Code-Editor, beginnend mit neuen Anweisungen zur Erkennung von Änderungen auf angle.io.

Optimierte Zugänglichkeit von Seitentiteln

Eine weitere empfohlene bewährte Methode besteht darin, sicherzustellen, dass die Seitentitel Ihrer Anwendung auf unverwechselbare Weise kommunizieren.

Das neue Route.title-Attribut im Angular Router in v13.2 erleichtert dies. Das Hinzufügen eines Titels erfordert keine zusätzlichen Importe und ist stark typisiert.

„Banane in einer Schachtel“-Fehler

Ein häufiger Syntaxfehler von Entwicklern besteht darin, die Klammern und runden Klammern in der bidirektionalen Bindung umzudrehen und ([]) Anstatt von [()]. Da () sieht irgendwie aus wie eine Banane und [] sorta sieht aus wie eine Kiste, daher wurde es auch „Banane in einer Kiste“ genannt, weil die Banane in die Kiste gehört.

Da es sich bei diesem Fehler um eine technisch gültige Syntax handelt, kann die CLI des Frameworks anerkennen, dass dies in seltenen Fällen das ist, was Entwickler planen. In der Version v13.2 wurden detaillierte Meldungen zu diesem Fehler und Anleitungen zur Behebung dieses Fehlers eingeführt, alles innerhalb der CLI und Ihres Code-Editors.

Tree-shakeable Fehlermeldungen

Diese Version von Angular 14 enthält neue Laufzeitfehlercodes. Robuste Fehlercodes machen es ziemlich einfach und schnell, Informationen zum Debuggen Ihrer Fehler zu erkennen und darauf zu verweisen. Auf diese Weise können Sie einen Optimierer erstellen, um Fehlercodes beizubehalten, während Fehlermeldungen (lange Zeichenfolgen) von Produktionspaketen baumstrukturiert werden.

Um den gesamten Text beim Debuggen eines Produktionsproblems zu erkennen, empfiehlt Angular, die Angular-Referenzhandbücher zu besuchen und den Fehler in einer Entwicklungsumgebung zu replizieren. Die Entwickler werden die aktuellen Fehler schrittweise umstrukturieren, um dieses aktualisierte Format in zukünftigen Versionen zu verwenden.

Fangen Sie Nullish Coalescing bei Nicht-Nullable-Werten ab

Erweiterte Diagnosen führen auch zu Fehlern für nutzlose nullische Koaleszenzoperatoren (??) in Angular-Vorlagen. Dieser Fehler wird insbesondere ausgelöst, wenn die Eingabe nicht „nullable“ ist, was bedeutet, dass ihr Typ nicht null oder undefiniert umfasst.

Erweiterte Diagnosen werden als Warnungen während des NG-Builds, ng-Serve und in Echtzeit mit dem Angular Language Service angezeigt. Die Diagnose ist in tsconfig.json konfigurierbar, wo angegeben werden kann, ob die Diagnose als Warnung, Fehler oder Unterdrückung betrachtet werden soll.

Weitere integrierte Verbesserungen in Angular 14 Release

Angular 14 umfasst Unterstützung für das aktuelle TypeScript 4.7 und zielt jetzt standardmäßig auf ES2020 ab, sodass die CLI kleineren Code ohne Downlevel ausliefern kann.

Darüber hinaus gibt es drei weitere Featurettes, die in Angular 14 hervorgehoben werden sollten:

An geschützte Komponenten-Member binden

In Angular können Sie jetzt geschützte Komponentenmitglieder direkt aus Ihren Vorlagen binden.

Dadurch erhalten Sie mehr Kontrolle über die öffentliche API-Oberfläche Ihrer wiederverwendbaren Komponenten.

Optionale Injektoren in eingebetteten Ansichten

Angular 14 fügt Unterstützung für das Übergeben eines optionalen Injektors hinzu, während eine eingebettete Ansicht durch ViewContainerRef.createEmbeddedView und TemplateRef.createEmbeddedView entwickelt wird.

Der Injektor ermöglicht dann die Personalisierung des Abhängigkeitsverhaltens innerhalb der spezifischen Vorlage.

NgModel OnPush

Zu guter Letzt beendet ein Community-Beitrag ein Top-Problem und stellt sicher, dass sich NgModel-Änderungen in der Benutzeroberfläche für OnPush-Komponenten widerspiegeln.

Angular CLI-Verbesserungen

Das standardisierte Analysieren von CLI-Argumenten führt Sie zu mehr Konsistenz über die gesamte Angular-CLI, und jetzt verwendet jedes Flag das Kleinbuchstabenformat. In Angular 14 wurde die veraltete Unterstützung für Camel-Case-Argumente entfernt und Unterstützung für die kombinierte Verwendung von Aliasen hinzugefügt.

der Vollendung

Angular 14 hat die automatische Vervollständigung in Echtzeit für Befehle wie ng serve eingeführt. Jedes Mal, wenn Sie auf einen Fehler in der Befehlszeile stoßen, sind Tippfehler die Hauptursachen dafür. Aber um dieses Problem zu lösen, hat Angular 14 eine neue ng-Vervollständigung eingeführt und eine automatische Vervollständigung mit Textvervollständigung in Echtzeit eingeführt!

Um sicherzustellen, dass alle Angular-Entwickler sich dessen bewusst sind, fordert Sie die CLI auf, sich während Ihrer ersten Befehlsausführung in Angular 14 für die automatische Vervollständigung zu entscheiden.

der Analytik

Mit dem Analysebefehl der CLI können Sie Analyseeinstellungen steuern und Analyseinformationen drucken. Die detailliertere Ausgabe kommuniziert effektiv Ihre Analysekonfigurationen und stellt dem Team Telemetriedaten zur Verfügung, um unsere Projektpriorisierung zu informieren.

des Caches

ng cache bietet Ihnen eine Möglichkeit, Cache-Informationen über die Befehlszeile zu steuern und zu drucken. Sie können sie aktivieren, deaktivieren oder von der Festplatte löschen sowie Statistiken und Informationen drucken.

Angular DevTools ist offline und in Firefox verfügbar

Die Angular DevTools-Debugging-Erweiterung hat jetzt die Offline-Unterstützung aktiviert, alle Anerkennung geht an einen Community-Beitrag von Keith Li. Für Firefox-Benutzer finden Sie die Erweiterung in der Add-Ons für Mozilla.

Wie installiere ich Angular 14?

Alles, was Sie tun müssen, ist, Angular v14 über npm zu installieren, indem Sie das nächste Flag verwenden. Öffnen Sie dann eine neue Befehlszeilenschnittstelle und führen Sie den folgenden Befehl aus, um die neue Version von Angular zu installieren.

npm install --global @angular/cli@next

Mit diesem Befehl können Sie die Version von Angular CLI einfach weltweit auf Ihrem Entwicklungscomputer installieren.

Wie aktualisiere ich auf Angular 14?

Sie können damit von Angular 13 auf Angular 14 upgraden Quelle.

Abschließende Aussage

Hier sind wir also angekommen, indem wir mit den Funktionen von Angular 14 zurechtgekommen sind. Sie müssen sich darauf freuen, dies in Ihrem Entwicklungsprozess einzusetzen. Wir werden diesen Stopp wieder ansteuern, wenn Google uns mit einer weiteren Version der Angular-Version überrascht.

Similar Posts

Leave a Reply