von
Mit dem neuen Release Cycle von Angular können wir uns alle sechs Monate auf eine neue Version von Angular freuen. Und diese Woche ist es wieder so weit: Angular Version 17 wird veröffentlicht!
In den letzten sechs Monaten hat das Angular Team fleißig an neuen Features und Verbesserungen gearbeitet, um Entwickler:innen das Leben einfacher zu machen und das Framework noch robuster und schneller.
Hier die Highlights im Überblick:
- Neue deklarative Control Flow Syntax
- Deferred Loading
- Signals sind Production ready
- Typescript 5.2
- Schnelleres Rekursives Type Cheking
- Immutable Array Methoden
- Using Keyword
- NodeJS > 18.13.0
- Automatisches Entfernen von CSS
- Fehlernachrichten in der Konsole, wenn lazy geladene Bilder das Rendering verlangsamen
- Support für die Transitions API
- Verbesserungen für SSR & ApplicationBuilder
Neue deklarative Control Flow Syntax
Diese ist die größte visuelle Änderung der Template Syntax, die es seit dem ersten Release von Angular gab. Wie der Name schon vermuten lässt, betrifft das Update die bisherige Direktiven-basierte Syntax: (*ngFor, *ngIf & ngSwitch). Die alte Syntax wurde durch die neue "@" Syntax ersetzt : (@for, @if & @switch).
Das Update bringt nicht nur eine neue Schreibweise mit sich, sondern auch neue Features:
Dank der neuen Syntax kann man nun auf ng-container und ng-template verzichten und dadurch den Code reduzieren. Es gibt bereits eine integrierte Track-Funktion, sodass man keine eigene mehr schreiben muss. Der @empty Block wird automatisch verwendet, falls keine Daten vorhanden sind.
Ein "Real World"-Vergleich der alten (oben) & neuen Syntax (unten):
Im obigen Beispiel verwenden wir wie bisher ng-template und ng-container sowie zwei Nullprüfungen (das erste Mal für das Observable und das zweite Mal, falls die Liste leer ist).
Dank der neuen Syntax (unten) entfällt die Notwendigkeit einer Nullprüfung für die Liste (dies übernimmt der @empty-Block) und wir können zusätzlichen Boilerplate-Code im Template vermeiden. Zusätzlich wird im @for-Block die Verwendung der track-Funktion vorgegeben, was positive Auswirkungen auf die Performance hat.
Deferred Loading
Eine weitere spannende Neuerung, die sich auf das Template auswirkt, ist das Deferred Loading. Frühere Versionen von Angular haben bereits die Möglichkeit geboten, Teile der App nachträglich zu laden und nicht alles auf einmal beim initialen Aufrufen der Seite. Allerdings konnte dies bisher nur über das Routing umgesetzt werden. Mit dem neuesten Update von Angular gibt es jetzt den neuen @defer-Block, der es ermöglicht, Teile des Templates erst dann nachzuladen, wenn sie benötigt werden. Auch sämtliche Abhängigkeiten des Code-Blocks, der lazy geladen wird, wie Direktiven, Komponenten oder Pipes, werden ebenfalls im lazy-Modus geladen.
In den folgenden Beispielen zeigen wir die Eigenschaften und Möglichkeiten des @defer-Blocks:
Eigene Logik
Im ersten Beispiel verwenden wir eigene Logik, um die Komponente "app-defered" lazy zu laden. Die Komponente im @defer -Block wird erst geladen, wenn die checkbox angeklickt wurde. Neben dem l@defer-Block gibt es noch drei weitere:
- @placeholder: wird Initial geladen, vor dem @defer-Block
- @error: falls beim Laden des @defer-Blocks Fehler aufkommen, wird dieser dann angezeigt
- @loading: wird temporär angezeigt beim Laden des @defer-Blocks
Bei der Verwendung von @defer sind @placeholder, @error & @loading zwar optional, aber sie können äußerst nützlich sein und viel Boilerplate-Code einsparen.
On Interaction
Angular rendert den @defer-Block, wenn es eine Interaktion mit dem @placeholder Element gab. Interaktionen können verschiedene Events sein wie: click, touch focus, keypress usw.
On Hover
Angular rendert den @defer-Block wenn der User mit der Maus über den @placeholder hovert.
On Timer
Der @defer Block wird nach einer festgelegten Zeit gerendert.
On Idle
Nachdem die initiale Seite geladen wurde und sich der Browser im Ruhezustand befindet, wird der @defer-Block geladen.
On Viewport
Der Inhalt des @defer Blocks wird dann gerendert, wenn sich der Inhalt des @placeholder im sichtbaren Teil des Browserfensters befindet.
Prefetch
Neben der Möglichkeit, Teile des Templates nachzuladen, ist es noch möglich, den Ladevorgang durch die prefetch-Bedingung zu beeinflussen. Der Inhalt im @defer-Block wird geladen, wenn der User mit der Maus über den Inhalt im @placeholder hovert. Angular rendert aber den Inhalt im @defer-Block erst dann, wenn es eine Interaktion mit dem @placeholder gab.
Signals sind Production Ready
Signals wurden in Angular Version 16 als Developer Preview Feature vorgestellt und sind jetzt stabil und bereit für die Verwendung in produktiven Umgebungen.
Automatisches Entfernen von CSS
Wenn eine Komponente aus dem DOM entfernt wird, wird ab sofort auch das entsprechende CSS automatisch entfernt. Dies hat positive Auswirkungen auf die Performance und sorgt für eine verbesserte Benutzererfahrung.
Fehler im Dev Mode beim langsamen lazy loading von Bildern
Mit dem Tool NgOptimizedImages bietet Angular eine Möglichkeit, Bilder für das Web zu optimieren, jedoch kann das zu verlangsamtem Laden der initialen Seite führen, wenn alle Bilder lazy geladen werden. Deshalb sollte man die Bilder, die die höchste Priorität haben, auch sofort laden. Sollte man diesen Schritt vergessen, zeigt Angular jetzt einen Fehler in der Konsole an.
View Transitions API
Der Angular Router kann jetzt die neue View Transitions API moderner Browser verwenden, um das Routing zwischen Seiten zu animieren.
Um die Api verwenden zu können, muss die withViewTransitions-Funktion importiert werden:
Die withViewTransitions -Funktion muss noch in der Routerkonfiguration hinzugefügt werden:
Mit diesen wenigen Schritten ist es jetzt möglich, Animationen beim Routing zu haben. Zusätzlich ermöglicht die View Transitions API eigene Animationen mit CSS zu erstellen.
Fazit
Angular 17 ist eine weiteres Release vollgepackt mit neuen Features und Verbesserungen. Diese bringen uns einen Schritt weiter in der modernen Web Entwicklung.
Der offizielle Zeitpunkt des Release ist für diese Woche geplant. Mehr Infos zum offiziellen Release gibt es unter : https://angular.io/