Step 2 - Register custom loader before serveWithVite; restrict to SSR mode.

Author: klerick

libs/nx-angular-mf/src/builders/helpers/utils.ts

@@ -1,8 +1,10 @@
 import { getSystemPath, normalize } from '@angular-devkit/core';
 import { workspaceRoot, readJsonFile } from '@nx/devkit';
-import { join } from 'path';
+import { join, sep } from 'path';
 import { ConfigMf, DataForImportMap } from '../types';
 import { getMapName } from './dependencies';
+import { existsSync } from 'fs';
+import { pathToFileURL } from 'node:url';
 
 export const workspaceRootPath = getSystemPath(normalize(workspaceRoot));
 
@@ -64,3 +66,18 @@ export function getDataForImportMap(
     remoteEntry: mfeConfig.remoteEntry,
   };
 }
+
+export function getPathForRegister(
+  path: 'custom-loader' | 'custom-loader-serve'
+) {
+  const fileName = path + '.js';
+  const pathToFile = join(__dirname, '..', 'custom-loader', fileName);
+  if (!existsSync(pathToFile)) {
+    throw new Error(`File ${fileName} not found`);
+  }
+
+  return {
+    parentUrl: pathToFileURL(pathToFile),
+    fileName: `.${sep}${fileName}`,
+  };
+}

libs/nx-angular-mf/src/builders/serve/index.ts

@@ -12,8 +12,19 @@ import { Plugin } from 'esbuild';
 
 import { ServeExecutorSchema } from './schema';
 import { BuildExecutorSchema } from '../build/schema';
-import { deepMergeObject, getMapName, indexHtml, loadModule, patchBuilderContext, prepareConfig } from '../helpers';
+import {
+  deepMergeObject,
+  getMapName,
+  getPathForRegister,
+  indexHtml,
+  loadModule,
+  patchBuilderContext,
+  prepareConfig
+} from '../helpers';
 import { entryPointForExtendDependencies, importMapConfigPlugin } from '../es-plugin';
+import { register } from 'node:module';
+
+const { port1, port2 } = new MessageChannel();
 
 
 function getBuilderAction() {
@@ -113,6 +124,15 @@ export async function* runBuilder(
     },
   };
 
+  if (targetOptions['ssr']) {
+    const { parentUrl, fileName } = getPathForRegister('custom-loader-serve');
+    register(fileName, {
+      parentURL: parentUrl,
+      data: { port: port2 },
+      transferList: [port2],
+    });
+  }
+
   const runServer = serveWithVite(
     normalizeOuterOptions,
     '@angular-devkit/build-angular:application',