Step 2 - Add config params for dependencies: JSON path or array; implement function to unify build and serve configurations.

Author: klerick

apps/host-application/project.json

@@ -12,6 +12,10 @@
       "executor": "./dist/libs/nx-angular-mf:build",
       "outputs": ["{options.outputPath}"],
       "options": {
+        "mf": {
+          "externalList": "build-external-list.json",
+          "skipList": "build-skip-list.json"
+        },
         "outputPath": "dist/apps/host-application",
         "index": "apps/host-application/src/index.html",
         "browser": "apps/host-application/src/main.ts",

build-external-list.json

@@ -0,0 +1,26 @@
+[
+  "@angular/animations",
+  "@angular/animations/browser",
+  "@angular/common",
+  "@angular/common/http",
+  "@angular/compiler",
+  "@angular/core",
+  "@angular/core/event-dispatch-contract.min.js",
+  "@angular/core/primitives/event-dispatch",
+  "@angular/core/primitives/signals",
+  "@angular/core/rxjs-interop",
+  "@angular/forms",
+  "@angular/platform-browser",
+  "@angular/platform-browser/animations",
+  "@angular/platform-browser/animations/async",
+  "@angular/platform-browser-dynamic",
+  "@angular/platform-server",
+  "@angular/router",
+  "@angular/upgrade/static",
+  "@angular/cdk",
+  "@angular/ssr",
+  "@klerick/native-federation-ssr/loadModule",
+  "rxjs",
+  "rxjs/fetch",
+  "rxjs/operators"
+]

build-skip-list.json

@@ -0,0 +1,22 @@
+[
+  "@angular/compiler-cli",
+  "@angular-devkit/core",
+  "@angular/cdk/testing",
+  "@angular/cdk/testing/selenium-webdriver",
+  "@angular/cdk/testing/testbed",
+  "@angular/cdk/schematics",
+  "@angular/cdk/text-field",
+  "@schematics/angular",
+  "@angular/platform-server/testing",
+  "@angular/platform-browser-dynamic/testing",
+  "@angular/platform-browser/testing",
+  "@angular/router/testing",
+  "@angular/animations/browser/testing",
+  "@angular/common/http/testing",
+  "@angular/common/testing",
+  "@angular/core/testing",
+  "@angular/ssr/node",
+  "rxjs/testing",
+  "@klerick/native-federation-ssr",
+  "@angular/platform-server/init"
+]

libs/nx-angular-mf/src/builders/build/schema.json

@@ -648,6 +648,38 @@
     },
     "mfe": {
       "type": "object",
+      "properties": {
+        "externalList": {
+          "description": "List of package imports that should use as external for building the MFE.",
+          "oneOf": [
+            {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            {
+              "description": "pat to file json",
+              "type": "string"
+            }
+          ]
+        },
+        "skipList": {
+          "description": "List of package imports that should not use as external for building the MFE.",
+          "oneOf": [
+            {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            {
+              "description": "pat to file json",
+              "type": "string"
+            }
+          ]
+        }
+      },
       "additionalProperties": false
     }
   },

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

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './prepare-config'

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

@@ -0,0 +1,57 @@
+import { BuilderContext } from '@angular-devkit/architect';
+import { join } from 'path';
+import fsPromise from 'fs/promises';
+
+import { SchemaMf } from '../schema';
+import { BuildExecutorSchema } from '../build/schema';
+import { ConfigMf } from '../types';
+import { workspaceRootPath } from './utils';
+
+export async function prepareConfig(
+  defaultOptions: SchemaMf['mf'],
+  buildOptions: BuildExecutorSchema,
+  context: BuilderContext
+): Promise<ConfigMf> {
+  const skipList: ConfigMf['skipList'] = [];
+  const externalList: ConfigMf['externalList'] = [];
+
+  if (defaultOptions.skipList) {
+    skipList.push(...(await checkIsFileOrArray(defaultOptions.skipList)));
+  }
+
+  if (defaultOptions.externalList) {
+    externalList.push(...(await checkIsFileOrArray(defaultOptions.externalList)));
+  }
+
+  return {
+    skipList: skipList,
+    externalList: externalList,
+  };
+}
+
+async function checkIsFileOrArray(
+  skipList: string[] | string
+): Promise<string[]> {
+
+  if (Array.isArray(skipList)) {
+    return skipList;
+  } else {
+    try {
+      const listListPath = join(workspaceRootPath, skipList);
+
+      const result = await fsPromise.lstat(listListPath);
+
+      if (result.isFile()) {
+        const skipListFromFile = JSON.parse(
+          await fsPromise.readFile(listListPath, 'utf8')
+        ) as string[];
+
+        return Array.isArray(skipListFromFile)
+          ? skipListFromFile
+          : [skipListFromFile];
+      }
+    } catch (err) {
+      throw new Error(`Invalid path: ${skipList}`);
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import { getSystemPath, normalize } from '@angular-devkit/core';
+import { workspaceRoot } from 'nx/src/utils/workspace-root';
+
+export function deepMergeObject(targetObject = {}, sourceObject = {}) {
+  const copyTargetObject = JSON.parse(JSON.stringify(targetObject));
+  const copySourceObject = JSON.parse(JSON.stringify(sourceObject));
+
+  Object.keys(copySourceObject).forEach((key) => {
+    if (
+      typeof copySourceObject[key] === 'object' &&
+      !Array.isArray(copySourceObject[key])
+    ) {
+      copyTargetObject[key] = deepMergeObject(
+        copyTargetObject[key],
+        copySourceObject[key]
+      );
+    } else if (
+      Array.isArray(copyTargetObject[key]) &&
+      Array.isArray(copySourceObject[key])
+    ) {
+      copyTargetObject[key] = [
+        ...copyTargetObject[key],
+        ...copySourceObject[key],
+      ];
+    } else {
+      copyTargetObject[key] = copySourceObject[key];
+    }
+  });
+
+  return copyTargetObject;
+}
+
+export const workspaceRootPath = getSystemPath(normalize(workspaceRoot));

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

@@ -1,3 +1,6 @@
 export type SchemaMf = {
-  mf?: Record<string, unknown>;
+  mf?: {
+    skipList?: string | string[];
+    externalList?: string | string[];
+  };
 };

libs/nx-angular-mf/src/builders/schema/schema.json

@@ -4,6 +4,38 @@
   "properties": {
     "mfe": {
       "type": "object",
+      "properties": {
+        "externalList": {
+          "description": "List of package imports that should use as external for building the MFE.",
+          "oneOf": [
+            {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            {
+              "description": "pat to file json",
+              "type": "string"
+            }
+          ]
+        },
+        "skipList": {
+          "description": "List of package imports that should not use as external for building the MFE.",
+          "oneOf": [
+            {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            {
+              "description": "pat to file json",
+              "type": "string"
+            }
+          ]
+        }
+      },
       "additionalProperties": false
     }
   }

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

@@ -1,17 +1,21 @@
-import { BuilderContext, createBuilder } from '@angular-devkit/architect';
+import {
+  BuilderContext,
+  createBuilder,
+  targetFromTargetString,
+} from '@angular-devkit/architect';
 import { normalizeOptions } from '@angular-devkit/build-angular/src/builders/dev-server/options';
 import {
   serveWithVite,
   buildApplicationInternal,
 } from '@angular/build/private';
 
-
 import { ServeExecutorSchema } from './schema';
+import { BuildExecutorSchema } from '../build/schema';
+import { deepMergeObject, prepareConfig } from '../helpers';
 
 
 function getBuilderAction() {
   return async function* (options, context, extensions) {
-
     for await (const result of buildApplicationInternal(
       options,
       context,
@@ -28,6 +32,21 @@ export async function* runBuilder(
 ) {
   context.logger.info('Run serve mf');
 
+  const buildTarget = targetFromTargetString(options.buildTarget);
+  const targetOptions = (await context.getTargetOptions(
+    buildTarget
+  )) as unknown as BuildExecutorSchema;
+
+  const resultMfeOptions = deepMergeObject(
+    targetOptions['mf'] || {},
+    options.mf || {}
+  );
+
+  const optionsMfe = await prepareConfig(
+    resultMfeOptions,
+    targetOptions,
+    context
+  );
 
   const normalizeOuterOptions = await normalizeOptions(
     context,
@@ -42,7 +61,7 @@ export async function* runBuilder(
 
   const transforms = {
     indexHtml: async (input: string) => {
-      return input
+      return input;
     },
   };