Microfrontend Implementation in Angular

By | 6 months ago

angularmicrofrontends in AngularWebpack Module FederationSingle SPA

# Microfrontend Implementation in Angular

Introduction

Microfrontend architecture allows breaking down a large monolithic frontend application into smaller, manageable pieces, each developed and deployed independently. This approach enhances scalability, maintainability, and enables teams to work on different parts of the application simultaneously.

Benefits of Microfrontends

  • **Scalability**: Independent development and deployment of features.

  • **Maintainability**: Smaller codebases are easier to manage and maintain.

  • **Flexibility**: Different teams can use different technologies and frameworks.

  • **Improved CI/CD**: Faster build and deployment cycles for individual microfrontends.

Key Concepts

  1. **Single SPA**: A JavaScript framework for front-end microservices. It allows multiple frameworks to coexist in a single-page application.

  2. **Webpack Module Federation**: Enables the dynamic loading of microfrontend modules.

Setting Up Microfrontends in Angular

Prerequisites

Ensure you have Node.js and Angular CLI installed. You also need basic knowledge of Angular and Webpack.

Step-by-Step Guide

Step 1: Create Angular Applications

Create multiple Angular applications for different microfrontends.


ng new main-app

ng new micro-app1

ng new micro-app2

Step 2: Configure Webpack Module Federation

  1. **Install Module Federation Plugin**:

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

  1. **Configure main-app**:

    • Open `webpack.config.js` in the `main-app` and configure the Module Federation plugin:

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

module.exports = {

  output: {

    publicPath: "http://localhost:4200/",

  },

  plugins: [

    new ModuleFederationPlugin({

      name: "mainApp",

      remotes: {

        microApp1: "microApp1@http://localhost:4201/remoteEntry.js",

        microApp2: "microApp2@http://localhost:4202/remoteEntry.js",

      },

      shared: ["@angular/core", "@angular/common", "@angular/router"],

    }),

  ],

};
  1. **Configure `micro-app1` and micro-app2** similarly with their own webpack.config.js:

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

module.exports = {

  output: {

    publicPath: "http://localhost:4201/",

  },

  plugins: [

    new ModuleFederationPlugin({

      name: "microApp1",

      filename: "remoteEntry.js",

      exposes: {

        './Component': './src/app/app.component.ts',

      },

      shared: ["@angular/core", "@angular/common", "@angular/router"],

    }),

  ],

};

Step 3: Update Angular Configurations

  1. **Update angular.json** to include custom-webpack\ builder:

"architect": {

  "build": {

    "builder": "@angular-builders/custom-webpack:browser",

    "options": {

      "customWebpackConfig": {

        "path": "./webpack.config.js"

      }

    }

  },

  "serve": {

    "builder": "@angular-builders/custom-webpack:dev-server",

    "options": {

      "customWebpackConfig": {

        "path": "./webpack.config.js"

      }

    }

  }

}
  1. **Update `main-app` routing** to lazy load microfrontends:

const routes: Routes = [

  {

    path: 'micro-app1',

    loadChildren: () => import('microApp1/Component').then(m => m.AppComponent)

  },

  {

    path: 'micro-app2',

    loadChildren: () => import('microApp2/Component').then(m => m.AppComponent)

  }

];

Step 4: Serve Applications

Serve each application on different ports:


ng serve --project main-app --port 4200

ng serve --project micro-app1 --port 4201

ng serve --project micro-app2 --port 4202

Best Practices

  • **Shared State Management**: Use shared services or libraries to manage state across microfrontends.

  • **Consistent Styling**: Ensure a consistent look and feel by sharing a common stylesheet or design system.

  • **Version Control**: Manage dependencies carefully to avoid version conflicts.

Conclusion

Implementing microfrontends in Angular using Webpack Module Federation and Single SPA can significantly enhance the scalability and maintainability of large applications. By breaking down the frontend into smaller, independent pieces, teams can develop, deploy, and scale different parts of the application independently.

References