Step 2 - Resolve serve startup error by adopting custom-esbuild approach; apply patch-builder-context method.

Author: klerick

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

@@ -1,3 +1,4 @@
 export * from './utils';
 export * from './prepare-config'
 export * from './dependencies'
+export * from './patch-builder-context'

libs/nx-angular-mf/src/builders/helpers/patch-builder-context.ts

@@ -0,0 +1,54 @@
+import { BuilderContext, Target } from '@angular-devkit/architect';
+
+const executorToBuilderMap = new Map<string, string>([
+  [
+    '@klerick/nx-angular-mf',
+    '@angular-devkit/build-angular:application',
+  ], [
+    './dist/libs/nx-angular-mf:build',
+    '@angular-devkit/build-angular:application',
+  ]
+]);
+
+function cleanBuildTargetOptions(options: any) {
+  delete options.mf;
+  return options;
+}
+
+export function patchBuilderContext(
+  context: BuilderContext,
+  buildTarget: Target,
+  externalDependencies: string[]
+): void {
+  const originalGetBuilderNameForTarget = context.getBuilderNameForTarget;
+
+  // We have to patch `getBuilderNameForTarget` because Angular CLI checks
+  // whether the runnable target is `@angular-devkit/build-angular:application`
+  // and then defines the server to run. If the `builderName` (returned by
+  // `context.getBuilderNameForTarget`) is not an `@angular-devkit/build-angular:application`,
+  // then it will use the Webpack server for the `dev-server target`. By patching
+  // the return value, Angular will use the Vite server for the `dev-server` target.
+  context.getBuilderNameForTarget = async (target) => {
+    const builderName = await originalGetBuilderNameForTarget(target);
+    console.log(builderName);
+    if (executorToBuilderMap.has(builderName)) {
+      return executorToBuilderMap.get(builderName)!;
+    }
+
+    return builderName;
+  };
+
+  const originalGetTargetOptions = context.getTargetOptions;
+  context.getTargetOptions = async (target) => {
+    const options = await originalGetTargetOptions(target);
+    if (
+      target.project === buildTarget.project &&
+      target.target === buildTarget.target &&
+      target.configuration === buildTarget.configuration
+    ) {
+      cleanBuildTargetOptions(options);
+    }
+    options.externalDependencies = externalDependencies;
+    return options;
+  };
+}

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

@@ -11,7 +11,7 @@ import {
 
 import { ServeExecutorSchema } from './schema';
 import { BuildExecutorSchema } from '../build/schema';
-import { deepMergeObject, getMapName, prepareConfig } from '../helpers';
+import { deepMergeObject, getMapName, patchBuilderContext, prepareConfig } from '../helpers';
 
 
 function getBuilderAction() {
@@ -59,6 +59,8 @@ export async function* runBuilder(
     (i) => i.packageName
   );
 
+  patchBuilderContext(context, buildTarget, externalDependencies);
+
   const normalizeOuterOptions = await normalizeOptions(
     context,
     context.target.project,