Angular Micro Frontends with Module Federation and Nx

Date: July 13, 2024

As Angular apps grow in complexity and teams scale up, micro frontends have become a go-to architectural pattern to split large codebases into smaller, independently deployable pieces. Angular’s ecosystem now offers powerful tools like Module Federation and the Nx workspace to build robust micro frontend architectures efficiently.

In this post, we’ll explore how to set up Angular micro frontends using Module Federation with Nx, helping you create scalable multi-team apps without sacrificing developer productivity or app performance.


What Are Micro Frontends?

Micro frontends extend the microservices concept to the frontend. Instead of one big monolithic Angular app, you break your UI into separate “microapps” that:

  • Are developed, tested, and deployed independently by different teams
  • Can use different Angular versions or even other frameworks
  • Collaborate via runtime integration, often sharing common libraries

This approach is especially helpful in large enterprises where teams need autonomy and faster release cycles.


Why Module Federation?

Webpack 5 introduced Module Federation, which allows apps to dynamically import code from remote bundles at runtime. This means you can:

  • Load features or entire micro frontends on demand
  • Share common dependencies like Angular core to avoid duplication
  • Deploy independently without rebuilding the entire app

Module Federation is the backbone technology powering many Angular micro frontend setups today.


Nx: The Meta-Tool for Angular Monorepos

Nx is a powerful workspace tool that makes managing multiple Angular projects seamless by:

  • Providing generators and executors optimized for Angular micro frontends
  • Enabling easy sharing of code (libraries) across apps
  • Supporting Module Federation out of the box with preset schematics

Nx combines build orchestration, dependency graph visualization, and testing strategies that greatly simplify micro frontend development.


Getting Started: Setting Up Module Federation with Nx

Let’s walk through creating two micro frontends — shell and remote — using Nx and Angular 17.

Step 1: Create an Nx workspace

npx create-nx-workspace@latest angular-mfe --preset=angular --appName=shell --style=scss
cd angular-mfe

Step 2: Generate the remote app

nx generate @nrwl/angular:app remote --style=scss

Step 3: Add Module Federation to the shell app

nx generate @nrwl/angular:setup-mf shell --remotes=remote

This configures the shell as the host and remote as the federated module.


How Module Federation Works Here

  • The shell app loads the remote app dynamically at runtime.
  • Both apps share Angular dependencies to reduce bundle size.
  • Remote exposes routes or components which shell consumes.

Example: Exposing a Component in Remote

In remote/src/app/app.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { RemoteComponent } from './remote.component';

@NgModule({
  declarations: [RemoteComponent],
  imports: [
    RouterModule.forChild([{ path: '', component: RemoteComponent }]),
  ],
})
export class RemoteModule {}

Add this to webpack.config.js of the remote app:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote',
      filename: 'remoteEntry.js',
      exposes: {
        './RemoteModule': './src/app/app.module.ts',
      },
      shared: ['@angular/core', '@angular/common', '@angular/router'],
    }),
  ],
};

Consuming the Remote Module in Shell

In shell app’s routing module:

const routes: Routes = [
  {
    path: 'remote',
    loadChildren: () =>
      import('remote/RemoteModule').then((m) => m.RemoteModule),
  },
];

When a user visits /remote, the shell app lazy loads the remote module dynamically.


Nx Benefits for Micro Frontends

  • Nx’s dependency graph helps visualize which micro frontends depend on shared libs.
  • You can run tests and builds incrementally per app.
  • Workspace libraries let you share UI components or utilities across apps.

Tips for Success

  • Keep shared dependencies synchronized across remotes and shell.
  • Use versioning strategies for your micro frontends to avoid conflicts.
  • Optimize bundle sizes by carefully sharing Angular and third-party libs.
  • Use Nx generators to scaffold components, libs, and micro frontends quickly.

Summary

Angular micro frontends with Module Federation and Nx enable:

  • Scalable, multi-team frontend architectures
  • Dynamic loading of remote features
  • Independent deployments without monorepo rebuilds

If your project is growing and you need better modularity, this setup can transform your Angular development workflow.


Feel free to ask for a full example repo or further tutorials on testing, deployment, and CI/CD strategies for Angular micro frontends!

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *