Micro Frontends in Angular

Micro frontends architecture allows you to split a large application into smaller, independent parts that can be developed, deployed, and scaled independently. This guide covers the basics of setting up micro frontends in Angular using Module Federation.

Setting Up Module Federation

Module Federation is a feature of Webpack 5 that allows you to share code between different applications at runtime. To set up Module Federation in your Angular project, follow these steps:

Step 1: Install Webpack 5

Ensure your Angular project is using Webpack 5. You can check and upgrade your Webpack version in the package.json file.

Step 2: Configure Module Federation

Add a webpack.config.js file in the root of your Angular project:

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  output: {
    uniqueName: 'myApp',
    publicPath: 'auto',
  },
  optimization: {
    runtimeChunk: false,
  },
  resolve: {
    alias: {
      ...require('react-scripts/config/webpack.config.dev').resolve.alias,
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'myApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Component': './src/app/component/component.module.ts',
      },
      shared: {
        '@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        '@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        '@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
      },
    }),
  ],
};

Step 3: Update Angular Configuration

Update the angular.json file to use the custom Webpack configuration:

// angular.json
{
  ...
  "projects": {
    "my-app": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            }
          }
        }
      }
    }
  }
}

Step 4: Update App Module

Update your Angular app module to expose the component:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './component.component.html',
  styleUrls: ['./component.component.css']
})
export class AppComponent {
  title = 'myApp';
}

Consuming a Remote Module

To consume a remote module in another Angular application, update the webpack.config.js file:

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

module.exports = {
  ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:4200/remoteEntry.js',
      },
      shared: {
        '@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        '@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        '@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
      },
    }),
  ],
};

Loading a Remote Component

Load the remote component dynamically in your Angular application:

// app.component.ts
import { Component, ViewContainerRef, ComponentFactoryResolver, Inject, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '
',
})
export class AppComponent implements OnInit {
  constructor(
    private viewContainerRef: ViewContainerRef,
    private cfr: ComponentFactoryResolver
  ) {}

  async ngOnInit() {
    const { RemoteComponent } = await import('remoteApp/Component');
    const factory = this.cfr.resolveComponentFactory(RemoteComponent);
    this.viewContainerRef.createComponent(factory);
  }
}

Key Points

Conclusion

Implementing micro frontends in Angular using Module Federation enables you to develop, deploy, and scale your applications independently. By setting up and configuring Webpack 5, you can easily share code between different applications and load remote components dynamically. Happy coding!