Micro frontends are an architectural style where a frontend application is decomposed into smaller, independently deployable units. This approach brings the benefits of microservices to the frontend, enabling larger teams to work more autonomously and scale development.

Why Micro Frontends?

• Independent Deployment: Each micro frontend can be deployed independently.
• Autonomous Teams: Teams own their micro frontends end-to-end.
• Technology Agnostic: Different micro frontends can use different frameworks (though often kept consistent within Angular ecosystems).
• Scalability: Easier to scale development for large applications.

Implementing Micro Frontends with Angular and Module Federation

Webpack 5's Module Federation is a powerful feature that allows multiple separate builds to form a single application. It enables a host application to dynamically load code from independently deployed "remote" applications.

Setting up Module Federation in Angular (using Nx or custom Webpack config):

Using Nx, you can generate a host and remote application:

# Create an Nx workspace (if not already done) npx create-nx-workspace@latest my-microfrontend-workspace --preset=angular # Generate a host application nx g @nrwl/angular:app shell --mfe --mfeType=host --port=4200 # Generate a remote application nx g @nrwl/angular:app remote-app --mfe --mfeType=remote --host=shell --port=4201

Exposing and Consuming Components/Modules:

In remote-app/module-federation.config.ts, expose components:

// remote-app/module-federation.config.ts import { ModuleFederationConfig } from '@nx/webpack'; const config: ModuleFederationConfig = { name: 'remoteApp', exposes: { './Component': './src/app/remote-entry/entry.component.ts', }, }; export default config;

In shell/module-federation.config.ts, define remotes:

// shell/module-federation.config.ts import { ModuleFederationConfig } from '@nx/webpack'; const config: ModuleFederationConfig = { name: 'shell', remotes: ['remoteApp'], // Defined in nx.json }; export default config;

Then, dynamically load in your shell application:

// shell/src/app/app.routes.ts import { loadRemoteModule } from '@nx/angular/mf'; import { Route } from '@angular/router'; export const appRoutes: Route[] = [ { path: 'remote', loadComponent: () => loadRemoteModule('remoteApp', './Component').then((m) => m.EntryComponent), }, ];

Conclusion

Micro frontends with Angular and Module Federation offer a powerful way to build large, complex web applications. This architectural style promotes independent development and deployment, leading to more agile and scalable frontend teams.