Camila E. Blanc Fick

Webpack Federated modules

Federated modules is a feature bundled in Webpack 5, the application builder that Angular uses by default when compiling the application to pure HTML, JS and CSS. Federated Modules is an implementation of the microfrontends architectural software pattern. Conceptual information related to microfrontends can be consulted at Micro Frontends (martinfowler.com). https://martinfowler.com/articles/micro-frontends.html

To work with federated modules, a host app and one or more remote apps are defined. Currently, the Base Application acts as the host of our microfrontends and we aim at the remote applications to be attached th the Base Application at implementation time, by editing a configuration file that describes the location and basic information required to couple the host application with each of the remote applications.

To use the Webpack Federated Modules in Angular, we’re making use of the @angular-architects/module-federation library https://www.npmjs.com/package/@angular-architects/module-federation . Some of the resources we’ve used in preparing the Base App to work with Webpack can be found in the following links:

The Microfrontend Revolution: Module Federation in Webpack 5 - ANGULARarchitects

Angular dynamic modules at runtime with Module Federation - DEV Community

Repositories and apps

The dxp-base-application repository includes the dxp-base-application host application project and, together with it, two example remote applications (dxp-example-modeler-application and dxp-example-client-application) are included in the same Nx workspace. This codebase makes use of the Nx tool to improve and enhance the development experience of enterprise apps. Information about Nx and its features can be found here.


over 1 year ago

Camila Blanc