Micro Frontends Implementation: The Web Components Approach (Angular)

Micro Frontends is the frontend architecture technique in which frontend monolith application is broken down into smaller fragments, that can be developed, tested, and deployed independently, but presented to the user as a single application. The best definition that I have found of micro frontends is from a Martin Fowler article, which says micro frontends can be defined as -

“An architectural style where independently deliverable frontend applications are composed into a greater whole”

To understand micro frontends better, you can refer to this article, it explains from scratch along with an example — https://martinfowler.com/articles/micro-frontends.html

I started working on micro frontends sometime back. It took me long to build a working template project by going through different sites and articles. So I want to save others time by combining the things that worked for me, at one place.

This article will cover how to implement micro frontends architecture when your micro frontend and container application are both in angular. By the end of this article, you will be able to create your own template project for micro frontend and container application. First, let’s see how to configure the micro frontend application.

Micro Frontend Application

Install ngx-build-plus and @angular/elements by running command —

npm i @angular/elements ngx-build-plus -D

Change start and build options in package.json file as below —

"start": "npm run build && serve -l 5001 dist/MicroFrontend",
"build": "ng build --prod --output-hashing none --single-bundle true",

Install serve if not installed already

npm i -S serve

Update your angular.json file to use ngx-build-plus for build as below

"architect": {
"build": {
"builder": "ngx-build-plus:build",
...
},
"serve": {
"builder": "ngx-build-plus:dev-server",
....
},
"test": {
"builder": "ngx-build-plus:karma",
...
},

You need define your custom element in app.module.ts file. I am exposing home component from my micro frontend to container application. I have used “mfe-home” name for the custom element, same must be used in container application to render the micro frontend. My app.module.ts file looks as below -

import { Injector, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [],
entryComponents: [
AppComponent,
HomeComponent
]
})
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap(): void {
const { injector } = this;
const ngCustomElement = createCustomElement(HomeComponent, { injector });
customElements.define('mfe-home', ngCustomElement);
}
}

Make sure to remove AppComponent from bootstrap in app.module.ts

For running micro frontend application run npm start

Container Application

I have used Angular Extension Element to lazy load Micro Frontend application in my container application.

Follow the following steps to configure your container application

1. Install npm i @angular-extensions/elements
2. Add import { LazyElementsModule } from ‘@angular-extensions/elements’;
3. Append LazyElementsModule to the imports: [] of your AppModule
4. Add new schemas: [] property with CUSTOM_ELEMENTS_SCHEMA value to @NgModule decorator of your AppModule
5. Use *axLazyElement directive on an element you wish to load and pass in the url of the element bundle.

My app.module.ts looks like below

import { LazyElementsModule } from '@angular-extensions/elements';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LazyElementsModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent],
schemas:[CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Component calling the mfe should look like below

@Component({
  selector: 'your-org-feature',
  template: `
    <!-- will be lazy loaded and uses standard Angular template bindings -->
    <mfe-home
      *axLazyElement="elementUrl"
      [data]="data"
      (dataChange)="handleChange($event)"
    >
    </mfe-home>
  `
})
export class FeatureComponent {
  elementUrl = 'http://localhost:5001/main.js';

  data: SomeData;

  handleChange(change: Partial<SomeData>) {
    // ...
  }
}

For running the container application run the below commands

npm link
ng serve

You can find full code on my GitHub — https://github.com/simmi08/MicroFrontend-WebComponentApproach-Angular

References:-

https://javascript.plainenglish.io/create-micro-frontends-using-web-components-with-support-for-angular-and-react-2d6db18f557a

https://angular-extensions.github.io/elements/#/home