© Matej Kotula/Shutterstock.com
Das Potenzial jenseits von Angular 9

Die Zukunft von Angular mit Ivy


Ivy ist in erster Linie für stark optimierte Bundles bekannt. Daneben bietet es aber auch einiges an Potenzial für künftige Features wie optionale Angular-Module, Zoneless Change Detection, dynamische Komponenten und Web Components.

Mit Angular 9 ist es endlich soweit: Der lang ersehnte Ivy-Compiler steht in einer abwärtskompatiblen Version zur Verfügung. Um den Übergang zur neuen Spielart von Angular nicht unnötig lang hinauszuzögern, ist Ivy auch schon standardmäßig aktiviert. Im besten Fall führt das ohne weiteres Zutun zu kleineren Bundles. Eine Verringerung um bis zu 40 Prozent ist möglich, abhängig von der Art der Anwendung. Doch Ivy steht für viel mehr als nur für kleinere Bundles. Ivy ist auch die Basis für künftige Features, die nach Angular 9 eingeführt werden.

Genau darum geht es in diesem Artikel. Ich möchte zeigen, welches Potenzial im Unterbau von Ivy schlummert und wie es die Zukunft von Angular beeinflussen kann. Dazu greife ich einige private APIs auf. Diese sind zwar nicht für den Produktionseinsatz gedacht, zeigen aber, mit welchen Ideen im Hinterkopf das Angular-Team Ivy entworfen hat und wo die Reise hingehen kann. Die hier verwendeten Beispiele finden sich in meinem GitHub-Repository unter [1]. Es handelt sich dabei um ein einfaches Dashboard (Abb. 1), zu dem sich dynamisch Kacheln mit Statistiken hinzufügen lassen.

steyer_ivy_1.tif_fmt1.jpgAbb. 1: Einfaches Dashboard als Beispielanwendung
steyer_ivy_2.tif_fmt1.jpgAbb. 2: Kleinere Bundles dank Ivy

Lazy Loading von Komponenten

Lazy Loading ist seit Angular 2 möglich. Allerdings nur auf Modulebene, denn der Angular-Compiler stellte bisher die zur Laufzeit benötigten Metadaten pro Modul bereit. Das ändert sich nun mit Ivy: Jede Komponente trägt ihre eigenen Metadaten in Form von statischen Eigenschaften mit sich. Davon bekommen wir nichts mit, weil Ivy diese Eigenschaften erst beim Kompilieren hinzufügt.

Dieses sogenannte Lokalitätsprinzip ermöglicht das nachträgliche Laden einzelner Komponenten. Sie lassen sich einfach mit Inline-Importen in die Anwendung holen:

import('../dashboard-tile/dashboard-tile.component').then(m => { const comp = m.DashboardTileComponent; [...] });

Die Frage ist jetzt allerdings, wie sich solche Komponenten anzeigen lassen. Eine Vorgehensweise, die bereits heute funktioniert, ist die Nutzung der ViewContainerRef eines Platzhalterelements (Listing 1).

Listing 1: ViewContainerRef

@Component({ … }) export class DashboardPageComponent { constructor( private injector: Injector, private cfr: ComponentFactoryResol...

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