Step 2 - Use esbuild plugin to create import-map-config entryPoints; provide config URL in dev-server and generate file during build.

Author: klerick

libs/nx-angular-mf/src/builders/es-plugin/import-map-config.ts

@@ -0,0 +1,48 @@
+import { Plugin, PluginBuild } from 'esbuild';
+import { sep } from 'path';
+import { ConfigMf } from '../types';
+import { getDataForImportMap, IMPORT_MAP_CONFIG_NAME } from '../helpers';
+
+export function importMapConfigPlugin(config: ConfigMf): Plugin {
+  return {
+    name: 'importMapConfig',
+    setup(build: PluginBuild) {
+      if (build.initialOptions.platform === 'node') return;
+      const name = IMPORT_MAP_CONFIG_NAME.split('.').at(0);
+      build.initialOptions.entryPoints = {
+        ...build.initialOptions.entryPoints,
+        [name]: name,
+      };
+
+      build.onResolve({ filter: new RegExp('^' + name) }, ({ kind, path }) => {
+        if (kind !== 'entry-point') {
+          return null;
+        }
+        return {
+          path: path,
+          namespace: name,
+        };
+      });
+
+      build.onLoad({ filter: /./, namespace: name }, () => {
+        return {
+          contents: `{}`,
+          loader: 'json',
+        };
+      });
+
+      build.onEnd((result) => {
+        const importMapResult = result.outputFiles.find(
+          (i) => i.path.includes(name) && !i.path.endsWith('.map')
+        );
+        importMapResult.contents = new TextEncoder().encode(
+          JSON.stringify(getDataForImportMap(config))
+        );
+
+        const pathsArray = importMapResult.path.split(sep);
+        pathsArray[pathsArray.length - 1] = `${name}.json`;
+        importMapResult.path = pathsArray.join(sep);
+      });
+    },
+  };
+}

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

@@ -1 +1,2 @@
 export * from './entry-point-for-extend-dependencies'
+export * from './import-map-config'

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

@@ -1,3 +1,5 @@
+export const IMPORT_MAP_CONFIG_NAME = 'import-map-config.json';
+
 export function addToPathName(currentPathname, addPathname) {
   return [
     ...currentPathname.split('/').filter((i) => !!i),
@@ -7,7 +9,7 @@ export function addToPathName(currentPathname, addPathname) {
 
 export async function fetchImportMap(host: string) {
   const urlHost = new URL(host);
-  const pathName = addToPathName(urlHost.pathname, 'importmap.json');
+  const pathName = addToPathName(urlHost.pathname, IMPORT_MAP_CONFIG_NAME);
   const url = new URL(pathName, urlHost.origin).toString();
   try {
     const r = await fetch(url);

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

@@ -13,7 +13,7 @@ import { Plugin } from 'esbuild';
 import { ServeExecutorSchema } from './schema';
 import { BuildExecutorSchema } from '../build/schema';
 import { deepMergeObject, getMapName, indexHtml, loadModule, patchBuilderContext, prepareConfig } from '../helpers';
-import { entryPointForExtendDependencies } from '../es-plugin';
+import { entryPointForExtendDependencies, importMapConfigPlugin } from '../es-plugin';
 
 
 function getBuilderAction() {
@@ -86,6 +86,7 @@ export async function* runBuilder(
 
   const resultEsBuild = [
     ...esPlugins,
+    importMapConfigPlugin(optionsMfe),
     entryPointForExtendDependencies(optionsMfe)
   ]