Lesezeit: 3 Minuten

 

   Hurra, hurra - Angular Version 17 ist da!  

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 Checking
    • 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 (links) & neuen Syntax (rechts):

   

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 ein weiteres Release vollgepackt mit neuen Features und Verbesserungen. Dieses bringen uns einen Schritt weiter in der modernen Web Entwicklung.

Der offizielle Zeitpunkt des Releases ist für diese Woche geplant. Mehr Infos zum offiziellen Release gibt es unter: https://angular.io/

Blogautor

Dinko Hodžić
Softwareentwickler ARS Computer und Consulting GmbH
Ihr Erfolg ist unser Ziel

Stehen Sie vor komplexen IT-Projekten? Mit unserer Expertise bieten wir Ihnen maßgeschneiderte Lösungen. Erfahren Sie mehr.

Werde Teil unseres Teams

Wir suchen ständig nach neuen Talenten. Für dich haben wir genau die richtige Stelle. Schau dir unsere offenen Positionen an.

Noch Fragen? Wir helfen Ihnen gerne!

Blog 16.05.24

Angular 18: Das nächste Kapitel

Angular 18 bringt Leistungsverbesserungen, neue Features und Entwicklerwerkzeuge mit sich. Erfahren Sie mehr über Zoneless Angular, verbesserte Bundling-Strategien und Barrierefreiheitsverbesserungen. Entdecken Sie die Zukunft von Angular!

Blog 01.12.23

Sheriff – Ordnung schaffen in TypeScript-Anwendungen

Erfahren Sie, wie Sie mit Sheriff in TypeScript-Anwendungen für Ordnung sorgen können. Nutzen Sie die Vorteile der horizontalen und vertikalen Aufteilung, um klare Grenzen und Abhängigkeiten zu definieren. Lesen Sie mehr!

Event

Rapid Application Development – Schnellstart für Ihre App

Im Webinar werden die beiden Technologien IBM Starter Kits sowie Node Red vorgestellt. Ziel ist es, Ihnen ein Verständnis für die Vor- und Nachteile der Technologien zu liefern sowie erste Einblicke in deren Benutzung zu geben, insbesondere in die Weboberfläche und den Building-Blocks.

Web Programmierung
Schulung 03.12.19

Web-Programmierung

In diesen Kursen erhalten Entwickler sowohl die Grundlagen zu HTML, CSS und JavaScript als auch fortgeschrittene Kenntnisse zu JavaScript.

Blog 30.05.24

React Server Components und Next.js

Erfahren Sie mehr über React Server Components und Next.js für effizientes Server Side Rendering in Web-Applikationen. Eine detaillierte Analyse und Implementierungstipps.

Blog

9 Tipps & Tricks für Angular

Angular ist unter Webentwicklern ein beliebtes Framework für das Programmieren von Web-, Desktop- und mobilen Anwendungen. In unserer Anleitung haben wir neun Tipps & Tricks zusammengestellt, welche Angular-Einsteigern und Profis die Webentwicklung garantiert erleichtert.

Blogbeitrag zu GARANCY IAM Suite Version 3
Blog 20.10.20

GARANCY IAM Suite – Das bietet Version 3

Die GARANCY IAM Suite ist für viele Professionals im Identity Access Management (IAM) das Tool der Wahl. Wir geben Ihnen einen Überblick zu den Neuerungen der dritten Version des Beta Systems Produkt.

CAT Logo
News 21.12.20

Die neue CAT-Version für Connections 6.0 und 6.5

Das CAT Connections Administration Toolkit vereinfacht die Administration und verwaltet die Inhalte von HCL Connections.

Laptop auf Tisch
Webcast 18.02.21

Neuigkeiten zu Domino V12 - Details von der Beta-Version

HCL hat das Betaprogramm für HCL Notes Domino V12 eröffnet. Die edcom ist mit dabei und nimmt die bereitgestellte aktuelle Beta-Version unter die Lupe. Erfahren Sie die Ergebnisse und Details in unserem kostenlosen Webinar am 25. März.

Lösung

Adobe – ein hervorragendes Kundenerlebnis schaffen

Kunden erwarten ein ansprechendes und personalisiertes Einkaufserlebnis – und das in Echtzeit. Schaffe jetzt deine digitale Transformation mit dem Marktführer Adobe.

Blog 12.01.24

Infrastructure as Code (IaC)

Erfahren Sie alles über Infrastructure as Code (IaC) und die neuesten Entwicklungen in der Cloud-Infrastrukturverwaltung mit Tools wie Terraform und Crossplane. Ein Blick auf die Zukunft des Infrastrukturmanagements.

Blog 28.08.23

Demokratisierung von Softwaretests

Besser und schneller Software testen: Welche Testmethoden beziehen nicht-technische Abteilungen ein? Über Tools wie Cypress und Cucumber lesen Sie hier.

Teaserbild Angular
Offering

One Identity Angular-Umstellung meistern – jetzt informieren

Was bedeutet der Wechsel des One Identity Managers nach Angular für Unternehmen? Welche Migrations-Szenarien gibt es? Wir zeigen WIE! ✅

Wissen

Neuerungen in IBM WebSphere MQ Version 7.1 - Teil 2

Wie kann WebSphere MQ noch schneller und zuverlässiger werden, als es jetzt schon ist? Lohnt es sich auf die neue Version von WebSphere MQ zu migrieren? Im zweiten Teil unseres Blogeintrages über die Neuerungen in der neuen Version von WebSphere MQ werden wir diese Fragen beantworten.

Rechner mit Programmiercode
Wissen

Neuerungen in IBM WebSphere MQ Version 7.1 - Teil 1

Auf der IBM WebSphere Technical Conference 2011 wurden die Neuerungen bei der IBM WebSphere MQ Version 7.1 vorgestellt. Unser Blogartikel fasst das Wichtigste für Sie zusammen.

News 12.08.21

Neue App-Version von „Confluence Cloud for Microsoft Teams"

Atlassian gab kürzlich eine neue Version von Confluence Cloud für die Microsoft Teams App, bekannt. Auf der Grundlage von Kundenfeedback hat Atlassian die Integration von Confluence und Teams von Grund auf neu entwickelt, um die Zusammenarbeit von Teams in Meetings und im Chat noch besser unterstützen zu können.

Laptopansicht mit Code, Stift und Block
Blog 25.02.21

HCL Notes Domino Version 12 – new template signer

HCL ermöglicht Kunden und Partnern, die neuen Funktionen der zukünftigen HCL Notes Domino Version 12 zu testen. Eine wichtige Änderung ist die Einführung einer neuen Signatur.

Lösung

Shopware

Profitiere von unserer langjährigen Zusammenarbeit mit Shopware und unserer Erfahrung aus einer Vielzahl an erfolgreichen Projekten als Shopware-Partner.

Blog 03.02.25

MIM End-of-Life: Strategien zur erfolgreichen Planung

Was kommt nach dem Microsoft Identity Manager? Wir zeigen Ihnen, wie Sie den Übergang erfolgreich planen – mit Optionen von schrittweiser Migration bis hin zu neuen Lösungen. Lesen Sie hier mehr.

Blog 11.08.23

AWS Lambda: Erste Schritte mit Java

In diesem Artikel lernen wir, was die Vorteile bei der Verwendung von AWS Lambda sind u. wie wir Java-Code in AWS-Lambda installieren und ausführen können.

Bleiben Sie mit dem TIMETOACT GROUP Newsletter auf dem Laufenden!