© ECHO Y/shutterstock.com, © S&S Media
Ivy voll integriert, Lazy-Loading-Komponenten und Lokalisierung

Was bringt Angular 9?


Angular 9 bringt Ivy in einer abwärtskompatiblen Variante, damit kleinere Bundles. Die i18n-Lösung wurde umfangreich überarbeitet und einige Ecken abgerundet. So stehen dem Entwickler und zukünftigen Versionen von Angular neue Möglichkeiten zur Verfügung.

Mit Angular 9 soll es so weit sein: Ivy wird endlich Standard. Das Angular-Team hat sehr viel Energie investiert, um Ivy abwärtskompatibel zum Vorgänger ViewEngine zu machen. Ein Blick auf den Changelog [1] verrät, dass genau das der Fokus von Version 9 war. Abseits davon gibt es auch sehr nette Neuerungen. Ich stelle anhand von Beispielen diejenigen vor, die uns die tägliche Arbeit vereinfachen werden. Dazu verwende ich ein paar Beispiele, die sich in meinem GitHub Repository finden [2].

Update

Das Update auf Angular 9 ist, wie schon von den Vorgängerversionen gewohnt, sehr geradlinig. Der CLI-Befehl ng update @angular/core @angular/cli reicht aus, um die Bibliotheken auf den neuesten Stand zu heben. Eventuelle Breaking Changes werden dabei soweit als möglich automatisiert berücksichtigt. Möglich machen das Migrationsskripte, die auf dem CLI-internen Codegenerator Schematics basieren und den bestehenden Quellcode geringfügig modifizieren. Für die Fälle, in denen wir manuell eingreifen müssen, geben die verwendeten Schematics eine Meldung aus. Weitere Informationen zur Migration finden sich unter [3].

Ivy by default

Die wichtigste Neuerung bei Angular 9 ist wohl, dass der neue Ivy-Compiler, an dem seit vielen Monaten gearbeitet wird, standardmäßig aktiviert ist. Unsere Bundles werden damit nach der Umstellung auf Version 9 um bis zu 40 Prozent kleiner. Wie sehr unsere Anwendung dieses Potenzial ausschöpfen kann, hängt von ihrem Aufbau ab.

Um Breaking Changes zu vermeiden, wurde besonderes Augenmerk auf Abwärtskompatibilität gelegt. Das hat auch damit zu tun, dass bei Google über 1 500 Angular-Anwendungen im Einsatz sind. Diese Anwendungen sollen auch noch nach der Umstellung auf Version 9 funktionieren und halfen gleichzeitig, die Qualität von Ivy sicherzustellen. Zusätzlich kam eine Vielzahl weit verbreiteter Angular-Bibliotheken zur Qualitätssicherung zum Einsatz. Da das Angular-Team den gesamten Unterbau austauschen musste, ist Ivy kein einfaches Unterfangen. Daher kann es vorkommen, dass Angular Ivy in Randfällen den einen oder anderen Fehler zu Tage fördert. In diesen Fällen können wir Ivy mit der Eigenschaft enableIvy in der tsconfig.json deaktivieren:

"angularCompilerOptions": { "nableIvy": false }

Das Angular-Team ist an solchen Fällen interessiert und freut sich über entsprechende Bug Reports unter [4].

Lazy Loading von Komponenten

Auf den ersten Blick bringt Ivy kleinere Bundles. Doch die Architektur von Ivy hat noch viel mehr zu bieten, sodass wir in den nächsten Releases neue, darauf aufbauende Features erwarten können. Ein neues Feature ist heute schon verfügbar: Lazy Loading von Komponenten. Es war zwar schon von Anfang an integriert, doch mussten immer ganze Angular-Module geladen werden, da ViewEngine die Metadaten für den Einsatz der einzelnen Komponenten auf Modulebene untergebracht hat. Ivy verstaut diese Metadaten nun beim Kompilieren direkt in den Komponenten, somit können sie auch separat bezogen werden. Um den Einsatz dieser neuen Möglichkeit zu verdeutlichen, nutze ich hier ein einfaches Dashboard, das die anzuzeigenden Kacheln per Lazy Loading bezieht (Abb. 1). Hierfür benötigen wir zunächst einen Platzhalter, in den die Komponente geladen werden kann. Das kann jeder beliebige Tag sein, solange er mit einer Templatevariablen markiert wird: <ng-container #vc></ng-container>. Templatevariablen beginnen, wie man sieht, mit einer Raute. Die zugehörige Komponente kann dieses Element als ViewChild laden (Listing 1໿).

steyer_angular9_1.tif_fmt1.jpgAbb. 1: Dashboard mit Lazy Loading

Listing 1

export class...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang