Expose bookings app as web-component

Author: xkons

angular.json

@@ -137,8 +137,10 @@
       "prefix": "mf",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "ngx-build-plus:build",
           "options": {
+            "singleBundle": true,
+            "outputHashing": "none",
             "outputPath": "projects/bookings/dist",
             "index": "projects/bookings/src/index.html",
             "main": "projects/bookings/src/main.ts",
@@ -187,8 +189,7 @@
                   "replace": "projects/bookings/src/environments/environment.ts",
                   "with": "projects/bookings/src/environments/environment.prod.ts"
                 }
-              ],
-              "outputHashing": "all"
+              ]
             }
           }
         },

projects/bookings/src/app/booking.module.ts

@@ -24,6 +24,6 @@ import { BookingComponent } from './booking.component';
     HotToastModule.forRoot(),
     TranslateModule.forRoot(),
   ],
-  bootstrap: [BookingComponent],
+  exports: [BookingComponent],
 })
 export class BookingModule {}

projects/bookings/src/main.ts

@@ -1,12 +1,12 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { BookingModule } from './app/booking.module';
 import { environment } from './environments/environment';
+import { MicroFrontendModule } from './micro-frontend/micro-frontend.module';
 
 if (environment.production) {
   enableProdMode();
 }
 
 platformBrowserDynamic()
-  .bootstrapModule(BookingModule)
+  .bootstrapModule(MicroFrontendModule)
   .catch((err) => console.error(err));

projects/bookings/src/micro-frontend/entry.component.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: '<mf-booking></mf-booking>',
+})
+export class EntryComponent {}

projects/bookings/src/micro-frontend/micro-frontend.module.ts

@@ -0,0 +1,19 @@
+import { DoBootstrap, Injector, NgModule } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
+import { BookingModule } from '../app/booking.module';
+import { EntryComponent } from './entry.component';
+@NgModule({
+  declarations: [EntryComponent],
+  imports: [BookingModule],
+})
+export class MicroFrontendModule implements DoBootstrap {
+  constructor(private injector: Injector) {}
+
+  ngDoBootstrap(): void {
+    const customElement = createCustomElement(EntryComponent, {
+      injector: this.injector,
+    });
+    window.customElements.define('mf-bookings-entry', customElement);
+    console.log('Registered custom element mf-bookings-entry');
+  }
+}

projects/train-platform/src/app/app-routing.module.ts

@@ -13,7 +13,9 @@ const routes: Routes = [
   {
     path: 'bookings',
     loadChildren: () =>
-      import('./../booking/booking.module').then((m) => m.BookingModule),
+      import('./../micro-frontends/bookings-host.module').then(
+        (m) => m.BookingsHostModule
+      ),
   },
 ];
 

projects/train-platform/src/micro-frontends/bookings-host.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-bookings-host',
+  template: ` <mf-bookings-entry></mf-bookings-entry> `,
+})
+export class BookingsHostComponent {}

projects/train-platform/src/micro-frontends/bookings-host.module.ts

@@ -0,0 +1,22 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BookingsHostComponent } from './bookings-host.component';
+import { LoadMicroFrontendGuard } from './load-micro-frontend.guard';
+
+@NgModule({
+  declarations: [BookingsHostComponent],
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '**',
+        canActivate: [LoadMicroFrontendGuard],
+        component: BookingsHostComponent,
+        data: {
+          bundleUrl: 'http://localhost:4201/main.js',
+        },
+      },
+    ]),
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class BookingsHostModule {}

projects/train-platform/src/micro-frontends/load-micro-frontend.guard.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate } from '@angular/router';
+import { MicroFrontendRegistryService } from './micro-frontend-registry.service';
+
+@Injectable({ providedIn: 'root' })
+export class LoadMicroFrontendGuard implements CanActivate {
+  constructor(
+    private microFrontendRegistryService: MicroFrontendRegistryService
+  ) {}
+
+  canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
+    const bundleUrl = route.data.bundleUrl as unknown;
+    if (!(typeof bundleUrl === 'string')) {
+      console.error(`
+        The LoadMicroFrontendGuard is missing information on which bundle to load.
+        Did you forget to provide a bundleUrl: string as data to the route?
+      `);
+      return Promise.resolve(false);
+    }
+    return this.microFrontendRegistryService.loadBundle(bundleUrl);
+  }
+}

projects/train-platform/src/micro-frontends/micro-frontend-registry.service.ts

@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+
+function load(url: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = url;
+    script.onload = () => resolve();
+    script.onerror = () =>
+      reject({
+        error: `Bundle ${url} could not be loaded`,
+      });
+    document.body.appendChild(script);
+  });
+}
+
+/**
+ * The loading state of a bundle.
+ *
+ * UNKNOWN -> It has not been tried to load this bundle.
+ * LOADING -> The loading of this bundle is currently happening.
+ * LOADED -> The bundle has been successfully loaded.
+ * FAILED -> The loading of the bundle failed.
+ */
+type LoadingState = 'UNKNOWN' | 'LOADING' | 'LOADED' | 'FAILED';
+
+/**
+ * This service loads bundles and keeps track of which bundles have been already loaded.
+ * This way, it prevents errors that would occur if a bundle is loaded a second time.
+ */
+@Injectable({ providedIn: 'root' })
+export class MicroFrontendRegistryService {
+  private loadingStates: Record<string, LoadingState> = {};
+
+  /**
+   * Loads the given bundle if not already loaded, registering its custom elements in the browser.
+   *
+   * @param bundleUrl The url of the bundle, can be absolute or relative to the domain + base href.
+   */
+  async loadBundle(bundleUrl: string): Promise<boolean> {
+    if (['LOADING', 'LOADED'].includes(this.getLoadingState(bundleUrl))) {
+      return true;
+    }
+    this.loadingStates[bundleUrl] = 'LOADING';
+    const isSuccess = await load(bundleUrl)
+      .then(() => true)
+      .catch(() => false);
+    this.loadingStates[bundleUrl] = isSuccess ? 'LOADED' : 'FAILED';
+    return isSuccess;
+  }
+
+  /**
+   * Returns the loading state of the bundle.
+   *
+   * @param bundleUrl The url of the bundle.
+   */
+  getLoadingState(bundleUrl: string): LoadingState {
+    return this.loadingStates[bundleUrl] || 'UNKNOWN';
+  }
+
+  /**
+   * Returns if the bundle has already been loaded successfully.
+   *
+   * @param bundleUrl The url of the bundle.
+   */
+  isBundleLoaded(bundleUrl: string): boolean {
+    return this.getLoadingState(bundleUrl) === 'LOADED';
+  }
+}