© Spirit Boom Cat/Shutterstock.com
Kolumne: Die Angular-Abenteuer

Kolumne: Die Angular-Abenteuer


Dank Angular Elements können Angular-Komponenten als Web Components exportiert werden. Da sie sich separat verteilen und dynamisch in eine Shell laden lassen, bieten sie sich zur Realisierung von Micro Apps an. Der Monolith hat vielerorts ausgedient. Kleine wartbare Microservices liegen im Trend. Aber wie nutzt man diese Idee in der Welt von Single Page Applications? Von Frameworks unabhängige Web Components, die sich dynamisch in eine App-Shell laden lassen, sind hierfür eine moderne und attraktive Lösung, und genau die lassen sich nun mit Angular Elements erstellen. Dazu nutze ich ein Beispiel, das dynamisch Bundles mit Web Components lädt (Abb. 1).

steyer_angular_1.tif_fmt1.jpgAbb. 1: So einfach kann eine Shell-Anwendung aussehen, die Web Components lädt

Wie Abbildung 1 zeigt, kommen diese Web Components auch mit einem Router, der einen Wechsel zwischen den Seiten der Micro App erlaubt. Den Quellcode dazu gibt es wie immer in meinem GitHub-Account [1].

Angular Elements

Seit Version 6 ist Angular Elements im Lieferumfang des beliebten SPA-Frameworks von Google enthalten. Damit lassen sich Angular-Komponenten als standardkonforme Web Components darstellen. Genaugenommen müsste man von Custom Elements sprechen, weil Web Components ein Sammelbegriff für verschiedene Standards darstellt. Alles, was man hierfür benötigt, ist das npm-Paket @angular/elements und die darin enthaltene createCustomElement-Funktion (Listing 1).

Listing 1: „createCustomElement“

import { createCustomElement } from '@angular/elements'; [...] @NgModule({ [...] bootstrap: [], entryComponents: [ AppComponent, ClientAWidgetComponent ] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const appElement = createCustomElement(AppComponent, { injector: this.injector}) customElements.define('client-a', appElement); } }

Jede Komponente, die als Angular Element dargestellt werden soll, ist beim Modul der Wahl unter entryComponents einzutragen. Dadurch wird der Compiler auf die Komponente, die zur Laufzeit erst dynamisch instanziiert wird, aufmerksam. Verwendet man keine klassische Angular-basierte Bootstrap-Komponente, muss das Modul eine Methode ngDoBootstrap erhalten. Sie bietet sich an, um mit createCustomElement einen Wrapper für die Komponente zu erzeugen. Dieser lässt sie nach außen hin als Custom Element erscheinen. Bei der Gelegenheit bekommt das Custom Element auch den aktuellen Injector, um es am Dependency-Injection-Mechanismus von Angular anzuschließen. Der so geschaffen...

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