Angular Module Federation

Module Federation allows for dynamic code loading in microfrontend architectures. This guide covers the basics of implementing Module Federation in Angular applications.

Setting Up Module Federation

First, ensure that your Angular application is set up for Module Federation by installing the necessary dependencies:

npm install @angular-architects/module-federation --save-dev

Configuring Module Federation

Next, configure Module Federation in your application. This involves setting up the webpack configuration:

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const deps = require('./package.json').dependencies;

module.exports = {
  output: {
    publicPath: 'http://localhost:4200/',
  },
  optimization: {
    runtimeChunk: false,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'app',
      filename: 'remoteEntry.js',
      exposes: {
        './Component': './src/app/app.component.ts',
      },
      shared: {
        ...deps,
        '@angular/core': { singleton: true, strictVersion: true, requiredVersion: deps['@angular/core'] },
        '@angular/common': { singleton: true, strictVersion: true, requiredVersion: deps['@angular/common'] },
        '@angular/router': { singleton: true, strictVersion: true, requiredVersion: deps['@angular/router'] },
      },
    }),
  ],
};

Updating Angular Configuration

Update the angular.json to use the custom webpack configuration:

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

Exposing Modules and Components

In your application's webpack.config.js, expose the modules and components that you want to share:

// webpack.config.js
new ModuleFederationPlugin({
  name: 'app',
  filename: 'remoteEntry.js',
  exposes: {
    './Component': './src/app/app.component.ts',
    './Module': './src/app/app.module.ts',
  },
  shared: {
    '@angular/core': { singleton: true, strictVersion: true, requiredVersion: deps['@angular/core'] },
    '@angular/common': { singleton: true, strictVersion: true, requiredVersion: deps['@angular/common'] },
    '@angular/router': { singleton: true, strictVersion: true, requiredVersion: deps['@angular/router'] },
  },
})

Consuming Remote Modules

To consume remote modules in another Angular application, update the webpack.config.js of the consuming application:

// webpack.config.js (consumer app)
new ModuleFederationPlugin({
  name: 'consumerApp',
  remotes: {
    app: 'app@http://localhost:4200/remoteEntry.js',
  },
  shared: {
    '@angular/core': { singleton: true, strictVersion: true, requiredVersion: deps['@angular/core'] },
    '@angular/common': { singleton: true, strictVersion: true, requiredVersion: deps['@angular/common'] },
    '@angular/router': { singleton: true, strictVersion: true, requiredVersion: deps['@angular/router'] },
  },
})

Importing Remote Modules

In your consuming application, you can now dynamically import the exposed modules or components:

// some.component.ts
import { loadRemoteModule } from '@angular-architects/module-federation';

@Component({
  selector: 'app-some',
  template: `
               
             `,
})
export class SomeComponent implements OnInit {
  remoteComponent$: Promise;

  ngOnInit() {
    this.remoteComponent$ = loadRemoteModule({
      remoteName: 'app',
      exposedModule: './Component',
    }).then(m => m.Component);
  }
}

Key Points

Conclusion

Module Federation is a powerful feature that enables dynamic code loading and microfrontend architectures in Angular applications. By setting up Module Federation, configuring webpack, and using remote modules, you can create flexible and scalable applications. Happy coding!