How does Webpack 5’s Module Federation Facilitate a Micro Frontend Architecture in Angular?

Module Federation is a feature of Webpack that allows a JavaScript application to dynamically load code from another application at runtime. In an Angular context, this enables a powerful micro frontend architecture where different applications (e.g., a “shell” or “host” app and several “remote” feature apps) can be developed, deployed, and scaled independently.

How It Works

Module Federation lets one Angular application (the host) dynamically load parts of another Angular application (the remote). This means teams can work on different sections of the product independently, using separate repositories, deployment pipelines, and even release cycles.

Key Components

• Host Application: The main or container application that defines the overall layout and orchestrates the loading of remote applications.
• Remote Application: An independent Angular application exposes some of its modules, components, or services that can be consumed by a host.

Practical Example (Webpack Configuration):

A remote application (MfeApp) might expose a LoginComponent by configuring its webpack.config.js:

Practical Example:

// In MfeApp's webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = { // ... other webpack config plugins: [	new ModuleFederationPlugin({	name: "mfeApp",	filename: "remoteEntry.js",	exposes: {	'./LoginComponent': './src/app/auth/login/login.component.ts',	},	shared: {	"@angular/core": { singleton: true, strictVersion: true },	"@angular/common": { singleton: true, strictVersion: true },	"@angular/router": { singleton: true, strictVersion: true }, // ... other shared dependencies	}	}), ],
};

The host application then references this remote in its own Webpack configuration to consume LoginComponent.

Conclusion

Webpack Module Federation helps Angular teams build modular, scalable applications without merging everything into a single monolith. It’s ideal for large enterprise apps with multiple development teams. If you’re planning to transition to this architecture or want to speed up independent deployment cycles, it’s a smart move to hire Angular developers with hands-on experience in micro frontends and Module Federation.