Angular

Angular Webpack Module Federation: A Guide to Micro Frontends

Introduction

With increasing complexity in modern web applications, maintaining them as monolithic units might prove to be a challenge. Micro Frontends is a popular architecture that enables applications to be split into small, manageable, and independently deployable modules. Webpack Module Federation, introduced in Webpack 5, makes it easy and efficient to implement micro frontends in Angular.

What is Webpack Module Federation?

Webpack Module Federation is a feature that enables several applications to share code and load remote modules dynamically at runtime. This provides Angular applications with:

The ability to dynamically load components, services, and other assets from other applications.

Bundle size reduction through sharing of dependencies between micro frontends.

Develop and deploy applications independently yet keep the integration experience smooth.

Advantages of Module Federation in Angular

Better scalability – One can develop and deploy each micro frontend independently.
Quicker load times – Shared dependencies minimize redundancy in bundle size.
Independent deployments – Multiple teams can develop different modules separately without impacting the application.
More Flexible architecture – Different versions of Angular can be utilized by various teams and yet still be in touch.

Setting Up Webpack Module Federation in Angular

Here is a step-by-step approach to setting up Module Federation within an Angular application.

Step 1: Installing Webpack and Dependencies

You should have Angular CLI 12+ installed first. Then install Webpack dependencies:

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

This dependency offers a seamless integration of Webpack Module Federation into Angular.

Step 2: Creating a Host and Remote Application

A host application is the shell that dynamically loads remote applications, and a remote application offers the modules or components.

Create the Host Application

ng new host-app --routing --style=css

Go into the project and set up Module Federation:

ng add @angular-architects/module-federation --project host-app

This will create the necessary Webpack configuration files.

Create the Remote Application

ng new remote-app --routing --style=css

Add Module Federation to the remote app:

ng add @angular-architects/module-federation --project remote-app --type remote

Step 3: Configure Webpack Module Federation

Modify webpack.config.js for both applications.

Host Application (webpack.config.js)

Remote Application (webpack.config.js)

const { ModuleFederationPlugin } = require('webpack').container;const mf = require('@angular-architects/module-federation/webpack');const path = require('path');module.exports = mf.withModuleFederationPlugin({name: 'remoteApp',filename: 'remoteEntry.js',exposes: {'./RemoteComponent': './src/app/remote/remote.component.ts',},shared: {"@angular/core": { singleton: true, strictVersion: true },"@angular/common": { singleton: true, strictVersion: true },"@angular/router": { singleton: true, strictVersion: true }}});

Step 4: Load Remote Components

In the host app, load the remote component dynamically:

import { loadRemoteModule } from '@angular-architects/module-federation';import { NgModule } from '@angular/core';import { RouterModule } from '@angular/router';@NgModule({imports: [RouterModule.forRoot([{path: 'remote',loadChildren: () => loadRemoteModule({remoteEntry: 'http://localhost:4201/remoteEntry.js',remoteName: 'remoteApp',exposedModule: './RemoteComponent'}).then(m => m.RemoteComponent)}])]})export class AppRoutingModule {}

Step 5: Run the Applications

Run the two applications on different ports:

ng serve remote-app --port 4201ng serve host-app --port 4200

Navigating to http://localhost:4200/remote will now load the RemoteComponent from the remote-app dynamically.

Conclusion

Webpack Module Federation is a feature that has immense strength as it facilitates micro frontend architecture for Angular. Using this, teams can create, deploy, and maintain various sections of an application separately with the same seamless integration. This process boosts scalability, optimizes performance, and facilitates more maintainable and flexible applications.

Ready to transform your business with our technology solutions? Contact Us today to Leverage Our Angular Expertise.