Building Micro-frontends based on Angular

Have you been wondering how to build an Angular Micro-frontend? You are in the right place!

Benefits of Micro Frontend Architecture

Automation of the CI/CD workflow

Because each app integrates and deploys separately, the CI/CD pipeline is simplified. Because all functionalities are distinct, you don't have to be concerned about the entire program while introducing a new feature. If there is a little issue in a module's code, the CI/CD pipeline will fail the entire build process.

Flexibility of teams

Numerous teams can bring value to multiple systems while working independently.

Single responsibility

Using this technique, each team is able to produce components with a single responsibility. Each Micro Frontend team is completely focused on the functionality of its Micro Frontend.

Reusability

Code reusability means that you will be able to utilize it in various places. Multiple teams can reuse a single module that has been built and delivered.

Technology agnosticism

Micro Frontend design is technology agnostic. Components from several web development frameworks can be used (React, Vue, Angular, etc.).

Simple learning

Smaller modules are easier for new developers to learn and grasp than a monolithic system with a large code structure.

Getting started

The diagram below depicts a micro frontend architecture

Header & Footer Module Federation

This section has at least two components that are ready to be exported from this module. First and foremost, we must establish a new app and configure a custom angular builder — This builder allows us to use custom webpack configs.

$ ng new layout

$ npm i --save-dev ngx-build-plus

Now, at the root of our project, we must create the webpack.config.js and webpack.prod.config.js files.

const webpack = require("webpack");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
  output: {
    publicPath: "http://localhost:4201/",
    uniqueName: "layout",
  },
  optimization: {
    runtimeChunk: false,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "layout",
      library: { type: "var", name: "layout" },
      filename: "remoteEntry.js",
      exposes: {
        Header: "./src/app/modules/layout/header/header.component.ts",
        Footer: "./src/app/modules/layout/footer/footer.component.ts",
      },
      shared: {
        "@angular/core": { singleton: true, requiredVersion: "auto" },
        "@angular/common": { singleton: true, requiredVersion: "auto" },
        "@angular/router": { singleton: true, requiredVersion: "auto" },
      },
    }),
  ],
};
module.exports = require("./webpack.config");

We can specify the minimum needed version, if two or more versions of a package are permitted, and so on. More information regarding various plugin choices may be found here.

Then, in angular.json , add a custom config file and set the default builder to ngx-build-plus

...
"projects": {
    "layout": {
        "projectType": "application",
        "schematics": {
            "@schematics/angular:component": {
                "style": "scss"
            },
            "@schematics/angular:application": {
                "strict": true
            }
        },
        "root": "",
        "sourceRoot": "src",
        "prefix": "app",
        "architect": {
            "build": {
                "builder": "ngx-build-plus:browser",
                "options": {
                    "outputPath": "dist/layout",
                    "index": "src/index.html",
                    "main": "src/main.ts",
                    "polyfills": "src/polyfills.ts",
                    "tsConfig": "tsconfig.app.json",
                    "inlineStyleLanguage": "scss",
                    "assets": [
                        "src/favicon.ico",
                        "src/assets"
                    ],
                    "styles": [
                        "src/styles.scss"
                    ],
                    "scripts": [],
                    "extraWebpackConfig": "webpack.config.js"
                },
                "configurations": {
                    "production": {
                        "budgets": [{
                                "type": "initial",
                                "maximumWarning": "500kb",
                                "maximumError": "1mb"
                            },
                            {
                                "type": "anyComponentStyle",
                                "maximumWarning": "2kb",
                                "maximumError": "4kb"
                            }
                        ],
                        "extraWebpackConfig": "webpack.prod.config.js",
                        "fileReplacements": [{
                            "replace": "src/environments/environment.ts",
                            "with": "src/environments/environment.prod.ts"
                        }],
                        "outputHashing": "all"
                    },
                    "development": {
                        "buildOptimizer": false,
                        "optimization": false,
                        "vendorChunk": true,
                        "extractLicenses": false,
                        "sourceMap": true,
                        "namedChunks": true
                    }
                },
                "defaultConfiguration": "production"
            },
            "serve": {
                "builder": "ngx-build-plus:dev-server",
                "configurations": {
                    "production": {
                        "browserTarget": "layout:build:production"
                    },
                    "development": {
                        "browserTarget": "layout:build:development",
                        "extraWebpackConfig": "webpack.config.js",
                        "port": 4205
                    }
                },
                "defaultConfiguration": "development"
            },
            "test": {
                "builder": "ngx-build-plus:karma",
                "options": {
                    "main": "src/test.ts",
                    "polyfills": "src/polyfills.ts",
                    "tsConfig": "tsconfig.spec.json",
                    "karmaConfig": "karma.conf.js",
                    "inlineStyleLanguage": "scss",
                    "assets": [
                        "src/favicon.ico",
                        "src/assets"
                    ],
                    "styles": [
                        "src/styles.scss"
                    ],
                    "scripts": [],
                    "extraWebpackConfig": "webpack.config.js"
                }
            }
        }
    }
},
"defaultProject": "layout"
}

Register Page Module Federation

This web application will house all of the logic for the login/registration page. The fundamental routine is nearly same; we need to create a new app and install a custom builder in order to use custom webpack configurations

$ ng new registration

$ npm i --save-dev ngx-build-plus

Following that, we must construct webpack.config.js and webpack.prod.config.js

// webpack.config.js
const webpack = require("webpack");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
  output: {
    publicPath: "http://localhost:4202/",
    uniqueName: "registration",
  },
  optimization: {
    runtimeChunk: false,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "registration",
      library: { type: "var", name: "registration" },
      filename: "remoteEntry.js",
      exposes: {
        RegistrationModule:
          "./src/app/modules/registration/registration.module.ts",
      },
      shared: {
        "@angular/core": { singleton: true, requiredVersion: "auto" },
        "@angular/common": { singleton: true, requiredVersion: "auto" },
        "@angular/router": { singleton: true, requiredVersion: "auto" },
      },
    }),
  ],
};
module.exports = require("./webpack.config");

As you can see, we just export RegistrationModule here. In our shell program, we may utilize this module as a lazy-loaded module. In addition, we must change the default builder to ngx-build-plus and include webpack configurations in the angular JSON file — The same as we did for the Header & Footer module before.

Dashboard Module Federation

This module displays certain information to a logged-in user. The same method as for the Register page, but with personal webpack configurations:

// webpack.config.js
const webpack = require("webpack");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
  output: {
    publicPath: "http://localhost:4203/",
    uniqueName: "dashboard",
  },
  optimization: {
    runtimeChunk: false,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "dashboard",
      library: { type: "var", name: "dashboard" },
      filename: "remoteEntry.js",
      exposes: {
        DashboardModule: "./src/app/modules/dashboard/dashboard.module.ts",
      },
      shared: {
        "@angular/core": { singleton: true, requiredVersion: "auto" },
        "@angular/common": { singleton: true, requiredVersion: "auto" },
        "@angular/router": { singleton: true, requiredVersion: "auto" },
      },
    }),
  ],
};

Shell App Module Federation

The main app is responsible for combining all of the individual micro frontend modules into a single app. As previously, we construct a new app using a custom Angular builder

$ ng new shell
$ npm i --save-dev ngx-build-plus

Add your own webpack configurations

const webpack = require("webpack");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
  output: {
    publicPath: "http://localhost:4200/",
    uniqueName: "shell",
  },
  optimization: {
    runtimeChunk: false,
  },
  plugins: [
    new ModuleFederationPlugin({
      shared: {
        "@angular/core": { eager: true, singleton: true },
        "@angular/common": { eager: true, singleton: true },
        "@angular/router": { eager: true, singleton: true },
      },
    }),
  ],
};

But first, we need to add webpack configuration with the custom builder to the angular.json file. All module configurations are declared in environment/environment.ts (for the production version, the localhost address must be replaced with the deployed public address)

export const environment = {
  production: false,
  microfrontends: {
    dashboard: {
      remoteEntry: "http://localhost:4203/remoteEntry.js",
      remoteName: "dashboard",
      exposedModule: ["DashboardModule"],
    },
    layout: {
      remoteEntry: "http://localhost:4201/remoteEntry.js",
      remoteName: "layout",
      exposedModule: ["Header", "Footer"],
    },
  },
};

Then, when applicable, we must include a loading Dashboard and a registration page. First and foremost, we must develop module federation utilities that will allow us to import remote modules from other programs.

// src/app/utils/federation-utils.ts
type Scope = unknown;
type Factory = () => any;
interface Container {
  init(shareScope: Scope): void;
  get(module: string): Factory;
}
declare const __webpack_init_sharing__: (shareScope: string) => Promise<void>;
declare const __webpack_share_scopes__: { default: Scope };
const moduleMap: Record<string, boolean> = {};
function loadRemoteEntry(remoteEntry: string): Promise<void> {
  return new Promise<void>((resolve, reject) => {
    if (moduleMap[remoteEntry]) {
      return resolve();
    }
    const script = document.createElement("script");
    script.src = remoteEntry;
    script.onerror = reject;
    script.onload = () => {
      moduleMap[remoteEntry] = true;
      resolve(); // window is the global namespace
    };
    document.body.append(script);
  });
}

async function lookupExposedModule<T>(
  remoteName: string,
  exposedModule: string
): Promise<T> {
  // Initializes the share scope. This fills it with known provided modules from this build and all remotes
  await __webpack_init_sharing__("default");
  const container = window[remoteName] as Container;
  // Initialize the container, it may provide shared modules
  await container.init(__webpack_share_scopes__.default);
  const factory = await container.get(exposedModule);
  const Module = factory();
  return Module as T;
}
export interface LoadRemoteModuleOptions {
  remoteEntry: string;
  remoteName: string;
  exposedModule: string;
}
export async function loadRemoteModule<T = any>(
  options: LoadRemoteModuleOptions
): Promise<T> {
  await loadRemoteEntry(options.remoteEntry);
  return lookupExposedModule<T>(options.remoteName, options.exposedModule);
}

There are several utilities for creating lazily loaded routes

// src/app/utils/route-utils.ts
import { Routes } from "@angular/router";
import { loadRemoteModule } from "./federation-utils";
import { APP_ROUTES } from "../app.routes";
import { Microfrontend } from "../core/services/microfrontends/microfrontend.types";
export function buildRoutes(options: Microfrontend[]): Routes {
  const lazyRoutes: Routes = options.map((o) => ({
    path: o.routePath,
    loadChildren: () => loadRemoteModule(o).then((m) => m[o.ngModuleName]),
    canActivate: o.canActivate,
    pathMatch: "full",
  }));
  return [...APP_ROUTES, ...lazyRoutes];
}

Then we must create a micro frontend service

// src/app/core/services/microfrontends/microfrontend.service.ts
import { Injectable } from "@angular/core";
import { Router } from "@angular/router";
import { MICROFRONTEND_ROUTES } from "src/app/app.routes";
import { buildRoutes } from "src/app/utils/route-utils";
@Injectable({ providedIn: "root" })
export class MicrofrontendService {
  constructor(private router: Router) {}
  /*
   * Initialize is called on app startup to load the initial list of
   * remote microfrontends and configure them within the router
   */
  initialise(): Promise<void> {
    return new Promise<void>((resolve) => {
      this.router.resetConfig(buildRoutes(MICROFRONTEND_ROUTES));
      return resolve();
    });
  }
}

In addition, file for type

// src/app/core/services/microfrontends/microfrontend.types.ts
import { LoadRemoteModuleOptions } from "src/app/utils/federation-utils";
export type Microfrontend = LoadRemoteModuleOptions & {
  displayName: string;
  routePath: string;
  ngModuleName: string;
  canActivate?: any[];
};

Then we must declare remote modules based on the routes

// src/app/app.routes.ts
import { Routes } from "@angular/router";
import { LoggedOnlyGuard } from "./core/guards/logged-only.guard";
import { UnloggedOnlyGuard } from "./core/guards/unlogged-only.guard";
import { Microfrontend } from "./core/services/microfrontends/microfrontend.types";
import { environment } from "src/environments/environment";
export const APP_ROUTES: Routes = [];
export const MICROFRONTEND_ROUTES: Microfrontend[] = [
  {
    ...environment.microfrontends.dashboard,
    exposedModule: environment.microfrontends.dashboard.exposedModule[0],
    // For Routing, enabling us to ngFor over the microfrontends and dynamically create links for the routes
    displayName: "Dashboard",
    routePath: "",
    ngModuleName: "DashboardModule",
    canActivate: [LoggedOnlyGuard],
  },
  {
    ...environment.microfrontends.registration,
    exposedModule: environment.microfrontends.registration.exposedModule[0],
    displayName: "Register",
    routePath: "signup",
    ngModuleName: "RegistrationModule",
    canActivate: [UnloggedOnlyGuard],
  },
];

Also, in the main app module, utilize our Micro Frontend Service

// src/app/app.module.ts
import { APP_INITIALIZER, NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { APP_ROUTES } from "./app.routes";
import { LoaderComponent } from "./core/components/loader/loader.component";
import { NavbarComponent } from "./core/components/navbar/navbar.component";
import { MicrofrontendService } from "./core/services/microfrontends/microfrontend.service";
export function initializeApp(
  mfService: MicrofrontendService
): () => Promise<void> {
  return () => mfService.initialise();
}
@NgModule({
  declarations: [AppComponent, NavbarComponent, LoaderComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(APP_ROUTES, { relativeLinkResolution: "legacy" }),
  ],
  providers: [
    MicrofrontendService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      multi: true,
      deps: [MicrofrontendService],
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

We must now load the Footer and Header components. To do so, we must edit the app component

// src/app/app.component.html
<main>
    <header #header></header>
    <div class="content">
        <app-navbar [isLogged]="auth.isLogged"></app-navbar>
        <div class="page-content">
            <router-outlet *ngIf="!loadingRouteConfig else loading"></router-outlet>
            <ng-template #loading>
                <app-loader></app-loader>
            </ng-template>
        </div>
    </div>
    <footer #footer></footer>
</main>

Then the file src/app/app.component.ts will look something like this

import {
  ViewContainerRef,
  Component,
  ComponentFactoryResolver,
  OnInit,
  AfterViewInit,
  Injector,
  ViewChild,
} from "@angular/core";
import {
  RouteConfigLoadEnd,
  RouteConfigLoadStart,
  Router,
} from "@angular/router";
import { loadRemoteModule } from "./utils/federation-utils";
import { environment } from "src/environments/environment";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements AfterViewInit, OnInit {
  @ViewChild("header", { read: ViewContainerRef, static: true })
  headerContainer!: ViewContainerRef;
  @ViewChild("footer", { read: ViewContainerRef, static: true })
  footerContainer!: ViewContainerRef;
  loadingRouteConfig = false;
  constructor(
    private injector: Injector,
    private resolver: ComponentFactoryResolver,
    private router: Router
  ) {}
  ngOnInit() {
    this.router.events.subscribe((event) => {
      if (event instanceof RouteConfigLoadStart) {
        this.loadingRouteConfig = true;
      } else if (event instanceof RouteConfigLoadEnd) {
        this.loadingRouteConfig = false;
      }
    });
  }
  ngAfterViewInit(): void {
    // load header
    loadRemoteModule({
      ...environment.microfrontends.layout,
      exposedModule: environment.microfrontends.layout.exposedModule[0],
    }).then((module) => {
      const factory = this.resolver.resolveComponentFactory(
        module.HeaderComponent
      );
      this.headerContainer?.createComponent(factory, undefined, this.injector);
    });
    // load footer
    loadRemoteModule({
      ...environment.microfrontends.layout,
      exposedModule: environment.microfrontends.layout.exposedModule[1],
    }).then((module) => {
      const factory = this.resolver.resolveComponentFactory(
        module.FooterComponent
      );
      this.footerContainer?.createComponent(factory, undefined, this.injector);
    });
  }
}

We include logic for loaders as well as reasoning for lazy-loaded components here (Header, Footer).

Conclusion

As frontend codebases get more advanced, there is a growing desire for more maintainable micro frontend structures. As a result, the ability to set clear boundaries that provide the appropriate levels of coupling and cohesiveness between technical and domain entities is critical, as is the ability to scale software delivery across separate, autonomous teams.