Earlier, frontend web development used to be like building a giant skyscraper all in one go. This approach often led to complexities and inefficiencies, particularly for large-scale projects and teams. However,now, with micro frontend architecture, it’s more like building with LEGO bricks. That is each piece can be built and tested separately before being put together.

This modular approach not only enhances flexibility and scalability but also streamlines collaboration and accelerates software development cycles.

In this blog, you will get to know everything about micro frontends and why they matter. Furthermore, we will delve into the practicalities of module federation, guiding you through its implementation to construct robust micro frontend architectures.

So, let’s start!

Understanding Micro frontend Architecture

Bonus: Discover the differences between Angular, React, and Vue to streamline your frontend development journey with the best-fit framework for your needs.

On the other hand, Module Federation takes micro frontend development to the next level by allowing different parts of an app to share code seamlessly. This promotes collaboration and speeds up development, resulting in a more adaptable and efficient frontend structure.

So, these can be implemented using different frameworks and libraries, not just limited to Angular or specific technology stacks.

Let’s decode some more advantages!

Benefits of Micro frontend Architecture

Here are the top 6 benefits of micro frontend architecture:

• Modularity and Separation of Concerns: Micro frontend architecture promotes breaking a monolithic app into smaller, self-contained modules. Each module handles specific features, allowing teams to work independently, reduce conflicts, and iterate faster.
• Independent Development and Deployment: Different teams can work on separate modules concurrently with micro frontends. Each micro frontend can have its own development lifecycle, version control, and deployment pipeline. This enables faster development cycles and more frequent releases without impacting other parts of the application.
• Improved Collaboration: It enhances collaboration with clear module boundaries and interfaces. This allows teams to focus on their expertise without overlapping. So, sharing components and services across micro frontends enhances code reuse and consistency.
• Scalability: It facilitates horizontal scaling by allowing individual modules to be scaled independently based on their resource requirements and usage patterns. This scalability ensures that the application can handle increased traffic and workload efficiently, without affecting the performance of other modules.
• Technology Flexibility: It allows for flexibility in technological choices, as each micro frontend can be built using different frontend frameworks or libraries. This enables teams to leverage the strengths of different technologies and tools while maintaining a cohesive user experience across the application.
• Isolation and Fault Tolerance: It promotes isolation between modules, reducing the impact of failures or issues in one module on the rest of the application.

If you’re still undecided about why micro frontend architecture has advantages, the comparison below can clarify it for you.

Keep reading!

Difference between Micro frontend and Monolithic frontend Architectures

The diagram below illustrates the architectural distinctions between them:

This table dissects the fundamental aspects of monolithic and micro frontend architecture to assist you in making an informed decision:

Remember when I mentioned Module Federation earlier in this blog?

Well, now, let’s explore what Module Federation is and how it’s transforming frontend development, making it easier to build flexible and scalable applications.

What is Module Federation?

Module Federation is a feature introduced in webpack 5 that revolutionizes the way JavaScript applications can be built and composed. It enables the creation of a federated architecture, where multiple independent applications (or micro frontends) can dynamically share code with each other at runtime.

At its core, Module Federation allows different webpack builds to work together as if they were a single application. This means that parts of an application can be split into separate bundles and loaded independently at runtime. This reduces initial load times and enables better code sharing and reuse across applications.

With that being understood, next, let’s learn how to implement this advanced technology for creating flexible and scalable micro frontend architectures in Angular.

Learn how we helped a customer automate their testing process, saving 90% of manual testing efforts with our AWS Serverless architecture.

Download Case Study

9 Steps to Implement Module Federation in Angular

Follow these steps to create a scalable micro frontend architecture in Angular using Module Federation:

Step 1: Setting up Angular Workspace with Multiple Projects

Create a new Angular workspace and projects using this code:

ng new my-blog

cd my-blog

ng generate application main-app

ng generate application microfrontend1

ng generate application microfrontend2

Step 1.1: Setting up Module Federation

To install Module Federation in an Angular app using npm, you can use the following command:

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

Also run the following commands to add the Module Federation plugin:

• For main-app project:

npx ng add @angular-architects/module-federation 
--project main-app--type shell --port 4200

• For microfrontend1 project:

npx ng add @angular-architects/module-federation 
--project microfrontend1 --type remote --port 4201

• For microfronten2 project:

npx ng add @angular-architects/module-federation 
--project microfrontend2 --type remote --port 4202

Step 2: Configure Angular Routing

Set up routing in your main Angular application (main app) to navigate between micro frontends. Use this code:

// main-app/src/app/app-routing.module.ts

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';




const routes: Routes = [

// Define routes to navigate to microfrontends

{path:'microfrontend1',loadChildren:()=> 
import('microfrontend1/Microfrontend1Module').
then(m => m.Microfrontend1Module) },

{path:'microfrontend2',loadChildren:()=> 
import('microfrontend2/Microfrontend2Module').
then(m => m.Microfrontend2Module) },

];




@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

Step 3: Import Router Module

Next, ensure that you import the Angular Router module in your main application module usinf this command:

// main-app/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module'; 
// Import the AppRoutingModule

import { AppComponent } from './app.component';




@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

AppRoutingModule // Add the AppRoutingModule to imports

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Step 4: Adjust Component Usage

Then, update the main application component template to use Angular Router for navigation:

<!-- main-app/src/app/app.component.html -->

<h1>Main Application</h1>

<nav>

<a routerLink="/microfrontend1">Microfrontend 1</a>

<a routerLink="/microfrontend2">Microfrontend 2</a>

</nav>

<router-outlet></router-outlet>

Step 5: Configure Module Federation in webpack

Set up Module Federation in webpack by adding the ModuleFederationPlugin and specifying remote entry points for microfrontend1 and microfrontend2. This allows dynamic module loading across different Angular applications.

// webpack.config.js

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

module.exports = {

plugins: [

new ModuleFederationPlugin({

remotes: {

microfrontend1: 'microfrontend1@http://localhost:3001/remoteEntry.js',

microfrontend2: 'microfrontend2@http://localhost:3002/remoteEntry.js',

},

}),

],

};

Step 6: Create Micro frontend Applications

For each micro frontend project, build Angular components using these commands:

a. // In microfrontend1/src/app/microfrontend1.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-microfrontend1',

template: '<p>Microfrontend 1</p>',

})

export class Microfrontend1Component {}

b. // In microfrontend2/src/app/microfrontend2.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-microfrontend2',

template: '<p>Microfrontend 2</p>',

})

export class Microfrontend2Component {}

Step 7: Expose Micro frontends Remotely

Configure Module Federation in each micro frontend’s webpack configuration (microfrontend1/webpack.config.js and microfrontend2/webpack.config.js):

a. // For microfrontend1/webpack.config.js:

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

module.exports = {

plugins: [

new ModuleFederationPlugin({

name: 'microfrontend1',

filename: 'remoteEntry.js',

// Expose microfrontend1

exposes: {

'./Microfrontend1Module': './src/app/microfrontend1.module.ts',

},

}),

],

};

b. //For microfrontend2/webpack.config.js:

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

module.exports = {

plugins: [

new ModuleFederationPlugin({

name: 'microfrontend2',

filename: 'remoteEntry.js',

// Expose microfrontend2

exposes: {

'./Microfrontend2Module': './src/app/microfrontend2.module.ts',

},

}),

],

};

Step 8: Integrate Micro frontends into the Main Application

In the main application, use remote components:

// In main-app/src/app/app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

template: `

<h1>Main Application</h1>

<app-microfrontend1></app-microfrontend1>

<app-microfrontend2></app-microfrontend2>

`,

})

export class AppComponent {}

Step 9: Test and Deploy

Finally, build each micro frontend and the main application and then deploy them to your hosting environment.

That’s it!

For a seamless experience, read a bonus section of best practices for building micro frontend architecture!

Best Practices for Building Micro frontend with Angular

Here are four best practices to help you easily build micro frontends with Angular:

• Define Clear Module Boundaries: Set boundaries between different frontend modules to ensure modularity and encapsulation. Also, use Angular modules to encapsulate related components, services, and other resources.
• Communicate Effectively Between Modules: Establish clear communication channels between different frontend modules using techniques such as event emitters, observables, or shared services. Avoid tightly coupling modules to minimize dependencies.
• Versioning and Dependency Management: Implement versioning and dependency management strategies to ensure that different frontend modules can be developed, tested, and deployed independently without causing compatibility issues.
• Continuous Integration and Deployment (CI/CD): Set up CI/CD pipelines to automate the build, test, and deployment processes for each frontend module. This ensures that updates can be released quickly and reliably.

So, embracing micro frontend architecture with Angular and Module Federation transforms frontend development. With this in place, your teams can work efficiently, deploy incrementally, and scale components individually. This can foster seamless collaboration and smooth software product development.

Want to learn more about cutting-edge software technologies? Share your thoughts with us at Nitor Infotech.