Step 2 - Support deployUrl for importmap paths; default to dev-server host if absent, ensuring CDN compatibility.

Author: klerick

build-skip-list.json

@@ -15,6 +15,7 @@
   "@angular/animations/browser/testing",
   "@angular/common/http/testing",
   "@angular/common/testing",
+  "@angular/common/upgrade",
   "@angular/core/testing",
   "@angular/ssr/node",
   "rxjs/testing",

libs/nx-angular-mf/src/builders/helpers/prepare-config.ts

@@ -20,6 +20,7 @@ export async function prepareConfig(
   const remoteEntry: ConfigMf['remoteEntry'] = defaultOptions.remoteEntry || {};
   const exposes: ConfigMf['exposes'] = {};
 
+  let deployUrl = '';
   let indexHtmlTransformer = (input: string) => Promise.resolve(input);
 
   if (defaultOptions.skipList) {
@@ -64,6 +65,10 @@ export async function prepareConfig(
     }
   }
 
+  if (buildOptions.deployUrl) {
+    deployUrl = buildOptions.deployUrl;
+  }
+
   return {
     skipList: skipList,
     externalList: externalList,
@@ -76,7 +81,8 @@ export async function prepareConfig(
     allImportMap: {},
     indexHtmlTransformer,
     remoteEntry,
-    exposes
+    exposes,
+    deployUrl
   };
 }
 

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

@@ -49,9 +49,10 @@ export function getDataForImportMap(
   const mapShareObject = getMapName(mfeConfig.shared, mfeConfig.sharedMappings);
   return {
     imports: [...mapShareObject.entries()].reduce((acum, [key, val]) => {
+      const resultName =
+        mfeConfig.outPutFileNames.find((i) => i.startsWith(key)) || key + '.js';
 
-      acum[val.packageName] = `./${key}.js`;
-
+      acum[val.packageName] = `${mfeConfig.deployUrl}${resultName}`;
       return acum;
     }, {}),
     exposes: Object.entries(mfeConfig.exposes).reduce((acum, [key, val]) => {

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

@@ -62,6 +62,14 @@ export async function* runBuilder(
     context
   );
 
+  if (!optionsMfe.deployUrl) {
+    const deployUrl = new URL('http://localhost');
+    deployUrl.port = options.port.toString();
+    deployUrl.hostname = options.host;
+    deployUrl.protocol = options.ssl ? 'https' : 'http';
+    optionsMfe.deployUrl = deployUrl.toString();
+  }
+
   const mapShareObject = getMapName(
     optionsMfe.shared,
     optionsMfe.sharedMappings

libs/nx-angular-mf/src/builders/types.ts

@@ -5,6 +5,7 @@ export type ConfigMf = {
   sharedMappings: { key: string; path: string }[];
   outPutFileNames: string[];
   esPlugins: string[];
+  deployUrl: string;
   allImportMap: Record<string, unknown>;
   indexHtmlTransformer: (input: string) => Promise<string>;
   exposes: Record<string, string>;