© best_vector/Shutterstock.com
Microservices ins Frontend hineintragen? Micro Apps mit Angular Elements und Web Components

Hereinspaziert!


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 geschaffene Wrapper lässt sich dann mit customElements.define beim Browser registrieren. Da auch die gesamte Anwendung nur aus Komponenten besteht, bietet es sich an, Micro Apps auf diesem Weg zu exportieren. Das zuletzt betrachtete Beispiel macht das, indem es die AppComponent als client-a bereitstellt:

<client-a [state]="someState" (message)="hand...

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