Angular: Dialog Komponente zur Laufzeit laden

Einleitung

Eine der Herausforderungen bei der Entwicklung von Angular-Webseiten ist die Reduzierung der Bundle-Größe. Dies ist entscheidend, um eine schnelle Ladezeit der Webseite für die Besucher zu gewährleisten. Eine Methode, dies zu erreichen, besteht darin, dass der Kompiler die Webseite in einzelne Javascript-Dateien kompiliert.

Mit der Einführung von Angular 17 wurde die @defer Anweisung hinzugefügt. Diese sieht wie folgt aus:

@defer {
  <large-component />
}

Diese Anweisung ermöglicht es, eine Standalone Komponente nachträglich zu laden. Dies ist besonders nützlich, wenn eine Komponente nicht sofort benötigt wird.

Dialog

Beim Öffnen eines Dialogs (einer Komponente) über MatDialog wird die zu öffnende Komponente direkt in der Javascript-Datei eingebettet. Dies ist nicht immer wünschenswert, insbesondere wenn der Dialog sehr selten geöffnet wird und daher kaum benötigt wird.

Es ist möglich, die Komponente erst beim Aufruf über import zu laden. Dadurch wird die eigentliche Javascript-Datei kleiner. Ein Beispiel dafür könnte wie folgt aussehen:

public openDialog() {
  import('./dialog.component').then(
        (x) => {
           this.matDialog.open(x.DialogComponent)
        },
  );
}

Falls die Komponente noch nicht geladen wurde, wird sie über die import-Anweisung vom Webserver nachgeladen. Anschließend öffnet MatDialog die Komponente. Es ist empfehlenswert, dass es sich bei der Komponente um eine Standalone-Komponente handelt

Durch die Verwendung dieser Techniken können Entwickler die Leistung ihrer Angular-Webseiten erheblich verbessern und so für ein besseres Benutzererlebnis sorgen. Es ist wichtig, stets auf dem neuesten Stand der Technologie zu bleiben und neue Funktionen und Techniken zu nutzen, sobald sie verfügbar sind.