Micro frontends break large applications into smaller, independently deployable parts, but loading them into a unified shell has historically been difficult.
Module Federation enables loading separately compiled code at runtime by defining host and remote roles, exposing modules, and sharing common dependencies.
A custom Angular CLI builder is required to inject the Module Federation configuration into the underlying Webpack build process.
The demonstration begins by addressing the Webpack 5 requirement in an Angular 11 project using a Yarn resolution and then adding the necessary plugin.
The remote application's Webpack config is adjusted to expose specific Angular modules and define shared dependencies to avoid duplication.
The shell application is configured to map the remote micro frontend and uses a standard lazy-loaded route to import it at runtime.
The shell and micro frontend are served simultaneously, demonstrating successful runtime loading and dependency sharing as verified in the browser's network tab.
While Webpack 5 is production-ready, official Angular CLI integration is expected in version 12, making the current approach an experimental opt-in for prototyping.
Module Federation is a key enabler for micro frontends and plugin-based architectures, providing a straightforward way to load separately compiled code.
45:40Manfred Steyer
35:17Serg Hospodarets
44:35Manfred Steyer
29:36Manfred Steyer
43:08Benjamin Glusa
36:22Sani Yusuf
24:47Manfred Steyer
41:49Trishul Goel
Jobs that call for the skills explored in this talk.
JO Media Software Solutions GmBh
Brunn am Gebirge, Austria
doinstruct Software GmbH
Berlin, Germany
BMS Corporate Solutions GmbH
Düsseldorf, Germany
autoiXpert GmbH & Co. KG
Stuttgart, Germany
Speech Processing Solutions
Vienna, Austria
tarent solutions GmbH
tarent solutions GmbH