refactor: refactor dynamic module to use async function instead of rxjs

Author: M4R1KU

extra-webpack.config.ts

@@ -7,40 +7,17 @@ export default {
   },
   plugins: [
     new ModuleFederationPlugin({
-      remotes: {
-        mfe1: 'mfe1'
-      },
       shared: {
-        '@angular/core': {
-          eager: true
-        },
-        '@angular/common': {
-          eager: true
-        },
-        '@angular/common/': {
-          eager: true
-        },
-        '@angular/router': {
-          eager: true
-        },
-        '@angular/cdk': {
-          eager: true
-        },
-        '@angular/cdk/': {
-          eager: true
-        },
-        '@angular/material': {
-          eager: true
-        },
-        '@angular/material/': {
-          eager: true
-        },
-        rxjs: {
-          eager: true
-        },
-        'rxjs/': {
-          eager: true
-        }
+        '@angular/core': { eager: true },
+        '@angular/common': { eager: true },
+        '@angular/common/': { eager: true },
+        '@angular/router': { eager: true },
+        '@angular/cdk': { eager: true },
+        '@angular/cdk/': { eager: true },
+        '@angular/material': { eager: true },
+        '@angular/material/': { eager: true },
+        rxjs: { eager: true },
+        'rxjs/': { eager: true }
       }
     })
   ]

package.json

@@ -2,8 +2,7 @@
   "name": "angular-module-federation",
   "version": "0.0.0",
   "scripts": {
-    "build": "ng build && ng build mf1",
-    "serve:dist": "concurrently \"serve dist/shell -l 5000 -s\" \"serve dist/mf1 -l 3000 -s\" "
+    "serve": "concurrently \"ng s -o\" \"ng s mf1\" \"ng s mf2\""
   },
   "private": true,
   "resolutions": {

proxy.conf.js

@@ -4,11 +4,9 @@ const PROXY_CONFIG = [
       '/mf1'
     ],
     target: 'http://localhost:3000/',
-    rewritePath: '',
     changeOrigin: true,
-    logLevel: 'debug',
     pathRewrite: {
-      '^/mf1': '', // rewrite path
+      '^/mf1': '',
     }
   },
 ];

src/app/app-routing.module.ts

@@ -1,20 +1,17 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { map } from 'rxjs/operators';
-import { load } from './dynamic-module';
+import { RouterModule, Routes } from '@angular/router';
+import { loadRemoteModule } from './dynamic-module';
 
 const routes: Routes = [
   {
     path: 'cathedrals',
-    loadChildren: () => load('http://localhost:3000/', 'mf1', 'Module').pipe(
-      map((module: any) => module.CathedralModule)
-    ).toPromise()
+    loadChildren: () => loadRemoteModule('http://localhost:3000/remoteEntry.js', 'mf1', 'Module')
+      .then(module => module.CathedralModule)
   },
   {
     path: 'cities',
-    loadChildren: () => load('http://localhost:4000/', 'mf2', 'Module').pipe(
-      map((module: any) => module.CityModule)
-    )
+    loadChildren: () => loadRemoteModule('http://localhost:4000/remoteEntry.js', 'mf2', 'Module')
+      .then(module => module.CityModule)
   },
   {
     path: '',

src/app/dynamic-module.ts

@@ -1,39 +1,58 @@
-import { Type } from '@angular/core';
-import { from, fromEvent, Observable, of } from 'rxjs';
-import { delayWhen, first, map, switchMap, tap } from 'rxjs/operators';
-
-declare function __webpack_init_sharing__(scope: string): Promise<void>;
-
-declare var __webpack_share_scopes__: any;
-
-export function load(url: string, id: string, moduleName: string): Observable<Type<any>> {
-  return loadRemoteEntry(url, id)
-    .pipe(
-      tap(() => __webpack_init_sharing__('default')),
-      tap((module: any) => module.init(__webpack_share_scopes__.default)),
-      switchMap((module: any) => from(module.get(moduleName))),
-      map((factory: any) => factory())
-    );
+type Scope = unknown;
+type Factory = () => any;
+
+type 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 };
+
+/**
+ * Loads a remote with the given name an gets the given module from the container.
+ * @param remoteEntryUrl url pointing to the remoteEntry.js of the remote
+ * @param remoteName name of the remote declared by the remote
+ * @param moduleName name of the exposed module
+ */
+export async function loadRemoteModule<T>(remoteEntryUrl: string, remoteName: string, moduleName: string): Promise<any> {
+  await loadRemoteEntry(remoteEntryUrl);
+  await loadRemoteEntry(remoteEntryUrl);
+
+  // initialize default scope
+  await __webpack_init_sharing__('default');
+  // get the remote container from the window
+  const container = window[remoteName] as Container;
+
+  // initialize the remote container with the default scope
+  container.init(__webpack_share_scopes__.default);
+  // get the factory from the container
+  const factory = await container.get(moduleName);
+  return factory() as T;
 }
 
-export function loadRemoteEntry(url: string,
-                                id: string): Observable<any> {
-  const module = document.getElementById(id);
-
-  if (module) {
-    return of(window[id]);
-  }
-
-  const script = scriptTag(url, id);
-  const load$ = fromEvent(script, 'load').pipe(first());
-  document.head.appendChild(script);
-
-  return load$.pipe(map(() => window[id]));
-}
-
-function scriptTag(url: string, moduleName: string): HTMLScriptElement {
-  const script = document.createElement('script');
-  script.src = url + 'remoteEntry.js';
-  script.id = moduleName;
-  return script;
+const loadedModules = {};
+
+/**
+ * Loads the remoteEntry file by appending it to the head.
+ * @param url url pointing to the remoteEntry.js of the remote
+ */
+async function loadRemoteEntry(url: string): Promise<void> {
+  return new Promise<void>(((resolve, reject) => {
+
+    if (loadedModules[url]) {
+      resolve();
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = url;
+
+    script.onerror = reject;
+    script.onload = () => {
+      loadedModules[url] = true;
+      resolve();
+    };
+    document.head.appendChild(script);
+  }));
 }