© Shutterstock / Peshkova
Dynamic Module Federation mit Angular

Dynamische Microfrontends


Dynamic Module Federation erlaubt das Laden von Microfrontends, die beim Kompilieren der Shell noch nicht bekannt waren. Deren Metadaten sollten trotzdem bereits beim Programmstart zur Verfügung stehen, damit Konflikte zwischen geteilten Bibliotheken durch Module Federation vermieden werden können.

Im Windows Developer 2.2021 habe ich das brandneue Module Federation, das webpack ab Version 5 anbietet, als Gamechanger für Microfrontends vorgestellt. Es erlaubt, separat kompilierte und veröffentlichte Anwendungsbestandteile bei Bedarf zu laden. Abbildung 1 zeigt die prinzipielle Funktionsweise: Eine Shellanwendung (offiziell Host genannt) definiert URL-Segmente, die auf die Microfrontends (offiziell Remotes genannt) verweisen. Die Microfrontends veröffentlichen Programmteile wie Komponenten oder Angular-Module. Die Shell kann nun zur Laufzeit mit dynamischen Imports diese Programmteile anfordern.

steyer_dynamicfederation_1.tif_fmt1.jpgAbb. 1: Prinzipielle Funktionsweise von Module Federation

Diese Konfiguration ist zwar einfach, hat aber auch einen Nachteil: Die Microfrontends müssen bereits beim Kompilieren der Shell bekannt sein. Im hier gezeigten Beispiel ist sogar der URL des Microfrontends (genaugenommen der URL mit seinen Metadaten) in der Shellkonfiguration, die webpack naturgemäß nur beim Build-Vorgang verwendet, hinterlegt. Während diese Vorgehensweise für Testumgebungen komfortabel ist, ist das für den Produktionseinsatz verständlicherweise ein No-Go.

Der Artikel setzt genau an dieser Stelle an und zeigt, wie Microfrontends, von denen wir erst zur Laufzeit erfahren, mit Module Federation geladen werden können. Als Beispiel dient eine Microfrontend-Shell, die sich nach dem Start bei einem Discovery Service über die verfügbaren Microfrontends informiert (Abb. 2). Der Quellcode des Beispiels findet sich wie gewohnt auf GitHub [1].

steyer_dynamicfederation_2.tif_fmt1.jpgAbb. 2: Die verwendete Fallstudie informiert sich zur Laufzeit über die verfügbaren Microfrontends

Projekt-Set-up

Wie bereits im oben genannten Artikel erwähnt, muss zunächst Module Federation für die Shell und für das Microfrontend aktiviert werden. Hierfür gibt es ein paar Voraussetzungen:

  • Nutzung von min. Angular 11 und Angular CLI 11

  • Nutzung der experimentellen webpack-5-Integration für das CLI 11

  • Installation des CLI-Plug-ins @angular-architects/module-federation [2]

Während webpack 5 und somit auch Module Federation seit Oktober 2020 stabil sind, ist die webpack-5-Integration für CLI 11 derzeit leider nur experimentell und deswegen ein Opt-in. Das wird sich voraussichtlich mit CLI 12 im ersten Halbjahr 2021 ändern. Bis dahin können wir die hier beschriebene Konfiguration zum Kennenlernen und Experimentieren nutzen, müssen jedoch auch mit dem einen oder anderen Fallstrick rechnen. Um das Opt-in für webpack 5 zu aktivieren, ist folgender Abschnitt in die package.json einzutragen:

"resolutions": { "webpack": "^5.0.0" },

Nach der Installation der Abhängigkeiten mit Yarn [3] bekommt man sogleich alle Abhängigkeiten von webpack 5 aufgezwungen. Bitte beachten Sie, dass hier wirklich Yarn zur Installation der Pakete genutzt werden muss – npm berücksichtigt den Abschnitt resolutions leider nicht. Das Paket @angular-architects/module-federation, das Module Federation für CLI-Projekte zugänglich macht, lässt si...

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