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-devThis 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=cssGo into the project and set up Module Federation:
ng add @angular-architects/module-federation --project host-appThis will create the necessary Webpack configuration files.
Create the Remote Application
ng new remote-app --routing --style=cssAdd Module Federation to the remote app:
ng add @angular-architects/module-federation --project remote-app --type remoteStep 3: Configure Webpack Module Federation
Modify webpack.config.js for both applications.
Host 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({remotes: {"remoteApp": "remoteApp@http://localhost:4201/remoteEntry.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 4200Navigating 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.
AI/ML
Contact Us