#It’s FrontendFriday – Angular 17 – Was gibt’s Neues?

Angular Playground

Abgesehen von einem moderneren Design der Homepage wird versucht, den Einstieg in Angular noch einfacher zu gestalten, in dem man im Browser eingebettete Tutorials machen kann.

Interessant ist, dass man sich das im Browser angezeigte Projekt auch herunterladen und dann lokal in einem Editor, zum Beispiel Visual Studio Code, weiter bearbeiten kann.
Angular empfiehlt Chrome zu verwenden, um den interaktiven Code Editor im Browser nutzen zu können. Etwas Geduld braucht man auch, bis der Browser Editor initial geladen ist.

Neue Control Flow Syntax

In Angular 17 gibt es eine neue Control Flow Syntax. Wer bisher im Template eine einfache if-Bedingung nutzen oder über eine Liste iterieren wollte, musste mit *ngIf und *ngFor arbeiten. Das war teilweise wenig intuitiv und wird durch die neue Control Flow Syntax deutlich komfortabler, wie das folgende Beispiel einer einfachen Bedingungsabfrage zeigt. [1]

// alte Code Flow Syntax
<div *ngIf="loggedIn; else anonymousUser">
        The user is logged in
</div>
<ng-template #anonymousUser>
        The user us not logged in
</ng-template>

// neue Code Flow Syntax
@if (loggedIn) 
{ 
        The user us logged in 
} @else { 
        The user is not logged in 
}

Vergleich zwischen Conditionals alte und neue Control Flow Syntax [1]

Hier sieht man, wie der Code deutlich lesbarer wird, da man ganz einfach mit den Schlagwörtern @if und @else arbeiten kann, genauso wie man es auch von anderen Programmiersprachen gewohnt ist. Bei den for-Loops gibt es auch einige nette Vereinfachungen. Eine davon im folgenden Code Beispiel zu sehen.

@for (user of users; track user.id) {
    {{ user.name }}
} @empty {
    Empty list of users
}

For-Loop in der neuen Control Flow Syntax [1]

Hier kann ganz einfach der Fall @empty angefragt werden, anstatt explizit user.count abfragen zu müssen. Des Weiteren sollen laut Angular die Performance von for-Loops bis zu 90 % besser sein als im vorherigen Control Flow. [2]

Es lohnt sich also so baldmöglichst möglich auf die neue Syntax umzusteigen.

Deferable Views

Ein weiteres Element der neuen Control Flow Syntax ist @defer oder Deferable Views. Damit lassen sich einzelne Komponenten lazy laden. Der folgende Codeausschnitt zeigt, wie in einer Komponente eine Liste and Kommentaren lazy geladen und sobald die Daten vorhanden sind, angezeigt werden. [1]

@defer (in viewport) {
    <comment-list/>
} @loading {
    Loading...
} @error {
    Loading failed :(
} @placeholder {
    <img src="comments-placeholder.png">
}

Anwendungsbeispiel des @defer Blocks [1]

Innerhalb eines @defer Blocks stehen weiter Blöcke zur Verfügung wie beispielsweise @laoding, @error oder @placeholder, durch die ganz einfach auf unterschiedlichen Status beim Laden von Daten reagiert werden kann. Eine weitere praktische Funktionalität ist, dass im @defer-Block auf Interaktionen reagiert werden kann, zum Beispiel auf ein Click-Event oder einen Timer, um dann daraufhin Daten lazy nachzuladen. Ein klassischer Anwendungsfall dafür sind Detailansichten. [2]

Sever Side Rendering

Das Sever Side Rendering war bisher nur durch das explizite Hinzufügen des Pakets @nguniversal möglich und wurde in Angular 17 nun vollständig in Angular Core integriert. Neue Projekte können direkt beim Erstellen Server Side Rendering im Projekt aktivieren (ng new my-projcet –ssr). In bestehenden Projekten kann Server Side Rendering auch nachträglich noch aktiviert werden (ng add @angular/ssr). [3][4]

TypeScript und Node.js

Hier muss man für Angular 17 mindestens TypScript 5.2 und NodeJS 18.13.0 verwenden. Niedrigere Versionen werden nicht mehr unterstützt. [3]

Angualr CLI

Neue Projekte, die mit Angular 17 erstellt werden, werden nun mit dem neuen Angular Buildsystem esbuild + Vite gebaut. Das verbessert nicht nur die Buildzeiten um 67 %, sondern verspricht auch kleinere Builds. [1]

Routing wird jetzt automatisch hinzugefügt, wenn man eine neue Komponente mit ng g c meine-komponente erstellt. [3]

Ebenso wird jede Komponente automatisch als Standalone Komponente angelegt, wenn nicht anders angegeben. Zwar heißt es, dass man in absehbarer Zeit weiterhin NgModules beibehalten werden, aber es wird dennoch empfohlen, Projekte nach und nach auf Standalone umzustellen. Eine Anleitung dafür gibt es hier. [1]

Lohnt es sich, auf Angular 17 umzustellen?

Die neue Angular Version bietet viele neue Features- die uns das Entwickler/innen Leben leichter machen. Wer so schnell wie möglich Projekte umstellen möchte, kann das hier mithilfe des Angular Update Guides tun.
Bei bestehenden Projekten stellt sich immer die Aufwand Nutzen Frage und ob es Hinblick auf die TypeScript und Node.js Versionen möglich ist.

Für einen neuen Projektstart lohnt es sich auf jeden Fall gleich mit der neuen Angular Version 17 zu starten.