Angular › Micro Frontends with Angular

How does Module Federation, a popular tool used with micro frontends, let separate Angular applications share code at runtime?

Advanced

Answer

Module Federation lets one application expose specific modules, and another completely separate application load and use those modules directly at runtime, without needing both to be built or deployed together, enabling truly independent applications to share components or services dynamically.

// webpack.config.js in the app exposing a module
new ModuleFederationPlugin({
  name: 'catalog',
  exposes: { './ProductList': './src/app/product-list/product-list.component.ts' }
});

// webpack.config.js in the app consuming it
new ModuleFederationPlugin({
  remotes: { catalog: 'catalog@http://localhost:4201/remoteEntry.js' }
});

Real-world example A shell application dynamically loads a completely separately deployed catalog micro frontend's product list component at runtime, using Module Federation, without the shell needing to be rebuilt whenever the catalog team ships an update.

Common follow-ups: What happens if two separate micro frontends both depend on different versions of the same shared library?;How does Module Federation handle sharing common dependencies, like Angular itself, to avoid loading them twice?

Build Environments & Deployment;Angular CLI & Project Structure