Step 3 - Use esbuild to bundle and transfer loader with dependencies to SSR build directory.

Author: klerick

libs/nx-angular-mf/src/builders/es-plugin/move-custom-loader-plugin.ts

@@ -0,0 +1,56 @@
+import { join } from 'path';
+import { Plugin, PluginBuild } from 'esbuild';
+
+export const CUSTOM_LOADER_NAME = 'custom-loader';
+
+export function moveCustomLoaderPlugin(): Plugin {
+  const pathToCustomLoaderFolder = join(__dirname, '../custom-loader');
+  return {
+    name: 'moveCustomLoaderPlugin',
+    setup(build: PluginBuild) {
+      if (build.initialOptions.platform !== 'node') return;
+      const customLoaderName = CUSTOM_LOADER_NAME;
+      build.initialOptions.entryPoints = {
+        ...build.initialOptions.entryPoints,
+        [customLoaderName]: customLoaderName,
+      };
+      build.initialOptions.external = [
+        ...build.initialOptions.external,
+        './server.mjs',
+      ];
+      build.onResolve(
+        { filter: new RegExp('^' + customLoaderName) },
+        ({ kind, path }) => {
+          console.log(kind, path);
+          if (kind === 'import-statement') {
+            return {
+              path: join(pathToCustomLoaderFolder, 'custom-loader.js'),
+            };
+          }
+          return {
+            path: path,
+            namespace: customLoaderName,
+          };
+        }
+      );
+      build.onLoad({ filter: /./, namespace: customLoaderName }, () => {
+        return {
+          contents: `
+            import * as customLoader from "custom-loader";
+            const {
+              initialize,
+              resolve,
+              load
+            } = customLoader;
+            export {
+              initialize,
+              resolve,
+              load
+            }
+          `,
+          loader: 'js',
+        };
+      });
+    },
+  }
+}

libs/nx-angular-mf/src/builders/es-plugin/server-ssr-plugin.ts

@@ -1,5 +1,6 @@
 import { Plugin, PluginBuild } from 'esbuild';
 import { DEPLOY_URL } from '../custom-loader/custom-loader';
+import { CUSTOM_LOADER_NAME } from './move-custom-loader-plugin';
 
 
 export function serverSSRPlugin(deployUrl: string): Plugin {
@@ -34,7 +35,7 @@ export function serverSSRPlugin(deployUrl: string): Plugin {
           contents: `
             import {register} from "node:module";
             const { port1, port2 } = new MessageChannel();
-            register('./custom-loader.mjs', {
+            register('./${CUSTOM_LOADER_NAME}.mjs', {
               parentURL: import.meta.url,
               data: { port: port2 },
               transferList: [port2],