© Maisei Raman/shutterstock.com, © cuttlefish84/shutterstock.com
Neuerungen in Angular 11

Die Angular-Evolution


Angular 11 bietet experimentelle Unterstützung für webpack 5 und somit Module Federation, Verbesserungen in Sachen I18N, ESLint-Support und Hot Module Replacement. Es kommt mit Performanceverbesserungen und schneidet ein paar alte Zöpfe ab.

Alle Jahre wieder – und zwar gleich zwei Mal – liefert das Angular-Team ein neues Major-Release. Die Version 11 war im November dran. Das Update erfolgt, wie mittlerweile gewohnt, mit einer Anweisung auf der Kommandozeile:

ng update @angular/cli @angular/core

Hierbei lädt das CLI nicht nur neue Bibliotheksversionen herunter, sondern startet auch Migrationsskripte, die den vorhandenen Programmcode automatisch an Breaking Changes anpassen. Eine volle Liste mit zusätzlichen manuellen Migrationsschritten findet man unter [1]. Dadurch kommt man in den Genuss einiger Verbesserungen und neuer Möglichkeiten, die wir uns in diesem Artikel näher anschauen werden.

Starke Typen

Seit Angular 10 existiert der sogenannte Strict Mode. Er aktiviert zusätzliche Prüfungen des TypeScript- und Angular-Compilers und sorgt so für eine höhere Codequalität. Die strengeren Prüfungen können jedoch auch bestehenden Code sowie Tutorials brechen. Genau deswegen befand man sich im Angular-Team in einer Zwickmühle: Auf der einen Seite möchte man natürlich Best Practices wie den Strict Mode forcieren; auf der anderen Seite möchte man aber auch Breaking Changes vermeiden. Deswegen mussten sich Entwickler bis jetzt bewusst für den Strict Mode entscheiden. Dazu steht der Schalter --strict beim Erzeugen eines neuen Projekts zur Verfügung (ng new project-name --strict). Daran ändert sich mit Version 11 prinzipiell nichts. Allerdings schlägt das CLI nun von sich aus den Strict Mode vor (Abb. 1).

steyer_angular11_1.tif_fmt1.jpgAbb. 1: Beim Erzeugen eines neuen Projekts wird nun der Strict Mode angeboten

Im Zuge der Bemühungen um eine stärkere Typisierung hat das Angular-Team auch bei zahlreichen APIs nachgebessert. Offiziell sind das Breaking Changes. De facto sollte man davon aber nicht viel merken, vor allem, wenn man die von Angular gebotenen Typen im Sinne des Erfinders verwendet hat.

Font-Inlining

Das Angular-Team ist nicht nur dafür bekannt, Best Practices zu forcieren, sondern auch dafür, auf das Thema Performance zu achten. Beide Ziele finden sich im automatischen Inlining von Webfonts wieder. Genaugenommen geht es um die Metadaten für die Webfonts. Wer beispielsweise ein Webfont wie folgt einbindet, lädt nämlich eine CSS-Datei, die wiederum die gewünschten Webfonts lädt:

<link href="https://fonts.googleapis.com/css2?family=[...]" rel="stylesheet">

Somit ergeben sich zwei Anfragen für ein Webfont – und das wirkt sich auf die wahrgenommene Startperformance aus. Das CLI 11 ersetzt nun standardmäßig den Linktag durch das referenzierte Style Sheet (Listing 1).

Listing 1

<style type="text/css"> @font-face{ font-family:'Permanent Marker'; font-style:normal; font-weight:400; font-display:swap;src:url(https://[...].woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, [...]; } </style>

Das Angular-Team hat noch weitere Ideen für Performanceverbesserungen dieser Art. Beispielsweise denkt es über das Inlining sämtlicher CSS-Dateien und ein automatisiertes Critical-Path...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang