Angular: Micro Frontend (Module Federation)

#angular #frontend #programming #tutorial

In this article, we will explain the micro frontend architecture in Angular and how to build it in an application.

In modern web development, the concept of micro frontends is gaining significant traction. Just as microservices revolutionized backend architecture, micro frontends bring similar benefits to the front end. This article explores what micro frontends are, their benefits, and how they can be implemented using Angular.
First Let's talk about the micro-Frontend

What's a micro-frontend?

Micro frontends are an architectural style where a frontend application is decomposed into smaller, semi-independent modules. Each module, or micro frontend, is developed, tested, and deployed separately, often by different teams. This modular approach allows for more flexibility, scalability, and maintainability.
Module Federation allows applications to load and share modules and their dependencies at runtime. This helps apps share code and resources, which reduces duplication and improves performance and development.

Now that you have a basic understanding of micro frontends, let's explore the types of applications that implement this architecture.

Where do we can use micro-frontend?

Micro frontend architecture can be implemented in various types of applications, especially those that benefit from scalability, flexibility, and independent deployment. such as

E-commerce Platforms:
Sites like Amazon or eBay, where different teams manage different parts of the site (e.g., product pages, search functionality, user profiles, and checkout processes).
Social Media Networks:
Platforms like Facebook or LinkedIn, where different features like news feeds, messaging, and notifications are handled by separate teams.

Implementing Micro Frontends with Angular

There are several methods to implement a micro-frontend application.

Iframe-Based:
Simple but limited in terms of interaction and performance.
Web Components:
Custom elements that are encapsulated and reusable.
Build-Time Integration:
Combining micro frontends during the build process.
Run-Time Integration:
Loading and integrating micro frontends at runtime, often using module federation in Webpack.

Here’s a step-by-step explanation of how you can implement Micro Frontends in Angular using Module Federation

Step 1: Set up the Main Application Shell

Create an Angular project using the Angular CLI
ng new shell-app --routing

Step 2: Configure Webpack Module Federation

install the dependencies

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

Add Module Federation configuration to webpack.config.js

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

module.exports = {
  output: {
    publicPath: "http://localhost:4200/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "shell",
      remotes: {
        mfe1: "mfe1@http://localhost:4201/remoteEntry.js",
      },
      shared: ["@angular/core", "@angular/common", "@angular/router"],
    }),
  ],
};

Step 3: Setting Up Micro Frontend Applications

Each micro frontend is an Angular application.
Initialize Micro Frontend Project:
ng new mfe1 --routing

Configure Webpack Module Federation
Add Module Federation configuration to webpack.config.js

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

module.exports = {
  output: {
    publicPath: "http://localhost:4201/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "mfe1",
      filename: "remoteEntry.js",
      exposes: {
        './Module': './src/app/feature/feature.module.ts',
      },
      shared: ["@angular/core", "@angular/common", "@angular/router"],
    }),
  ],
};

Expose Angular Modules
Expose the necessary modules in your micro frontend's webpack.config.js and ensure they are correctly set up to be consumed by the shell application.

Step 3: Integrate Micro Frontends into Shell

Load Remote Modules
Modify app-routing.module.ts in the shell application to load remote modules

const routes: Routes = [
  {
    path: 'mfe1',
    loadChildren: () => import('mfe1/Module').then(m => m.FeatureModule)
  }
];

Bootstrap Applications
Ensure both the shell and micro frontend applications are served and accessible.

Step 4: Running and Testing

Serve Applications
ng serve --project shell-app ng serve --project mfe1

Access the Shell Application
Navigate to http://localhost:4200 and verify that the micro frontend is integrated correctly.

Conclusion
Micro frontends with Angular provide a robust solution to manage large-scale, complex web applications. By breaking down a monolithic frontend into smaller, manageable pieces, teams can work more efficiently and deploy independently. While the architecture introduces some complexities, the benefits in terms of scalability, flexibility, and maintainability often outweigh the challenges. By carefully planning and implementing micro frontends, organizations can achieve a more resilient and scalable frontend architecture.

Thanks for reading the whole story ❤