Module Federation erlaubt das Laden separat bereitgestellter Programmteile zur Laufzeit und unterstützt somit bei der Umsetzung von Microfrontends. Über einen Custom Builder lässt sich dieses neue Konzept in das Angular CLI integrieren.

Im Oktober 2020 war es endlich soweit: webpack 5 ist erschienen und somit auch das darin integrierte Module Federation [1]. Dieses neue Feature ermöglicht etwas, das in der Vergangenheit nur mit Tricks und Workarounds möglich war: das Nachladen von separat kompilierten und bereitgestellten Programmteilen. Somit lassen sich endlich Plug-in-Architekturen und Microfrontends auf ordentliche Weise umsetzen.

Dieser Artikel zeigt, wie sich Module Federation für die Realisierung von Angular-basierten Microfrontends nutzen lässt. Dazu geht er auch auf die Integration in das Angular CLI ein. Zu diesem Zweck wird ein einfaches Microfrontend verwendet, das sich in eine Rahmenanwendung (Shell) laden lässt (Abb. 1).

Abb. 1: Verwendete Fallstudie

Der genutzte Quellcode findet sich auf meinem GitHub-Account [2].

Microfrontends und Module Federation

Ähnlich wie Microservices stellen auch Microfrontends separat entwickelte und bereitgestellte Einheiten dar. Sie sind allein lauffähig und lassen sich auch in Isolation testen. Somit können unterschiedliche Teams mit deren Umsetzung betraut werden. Diese Teams sind möglichst autark und können ihre eigenen Technologie- sowie Architekturentscheidungen treffen. Aus Gründen der Benutzerfreundlichkeit bietet es sich an, die einzelnen Microfrontends in eine Shell zu laden. Für den Benutzer ergibt sich somit der Eindruck einer großen integrierten Lösung. Genau hierbei unterstützt Module Federation.

Module Federation definiert zwei Rollen: Der Host entspricht der zuvor erwähnten Shell und Remotes entsprechen den Microfrontends (Abb. 2).

Abb. 2: Prinzipielle Funktionsweise von Module Federation

Die Konfiguration des Hosts legt virtuelle URLs fest, die auf die einzelnen Remotes verweisen. Die Remotes exportieren hingegen Programmteile wie Komponenten, Services und Module. Durch Nutzung der konfigurierten Namen kann der Host die von den Remotes exportierten Programmteile zur Laufzeit laden. Darüber hinaus können Hosts und Remotes auch untereinander Bibliotheken teilen, sodass die Anwendung sie nicht mehrfach laden muss.

Module Federation und das Angular CLI

Für den Einstieg benötigen wir eine Angular-CLI-Version, die webpack 5 unterstützt. Das CLI-Team hat in Planung, mit Version 11 webpack 5 als Opt-in zu unterstützen. Als dieser Text verfasst wurde, konnte man bereits die verfügbaren Betaversionen des CLI 11 hierfür verwenden. Für den vorliegenden Text wurde die Version 11.0.0-next.6 genutzt. Sie hat zwar noch einige Einschränkungen im Hinblick auf webpack 5, der gebotene Leistungsumfang reicht jedoch zum Erproben von Module Federation im Kontext von Angular. Um das CLI gemeinsam mit webpack 5 zu nutzen, muss folgender Eintrag in der package.json hinterlegt werden:

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

Die benötigten Bibliotheken müssen nun mit Yarn(!) [3] installiert werden. Die Verwendung von Yarn anstelle von npm ist wichtig, um den diskutierten resolutions-Abschnitt zu berücksichtigen.