Step 1 - Align plugin config with Angular Devkit standards; update executors for seamless NX integration.

Author: klerick

apps/mf1-application/project.json

@@ -7,7 +7,8 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:application",
+      "dependsOn": ["^build"],
+      "executor": "./dist/libs/nx-angular-mf:build",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/apps/mf1-application",
@@ -49,7 +50,8 @@
       "defaultConfiguration": "production"
     },
     "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
+      "dependsOn": ["^build"],
+      "executor": "./dist/libs/nx-angular-mf:serve",
       "configurations": {
         "production": {
           "buildTarget": "mf1-application:build:production"

apps/mf2-application/project.json

@@ -7,7 +7,8 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:application",
+      "dependsOn": ["^build"],
+      "executor": "./dist/libs/nx-angular-mf:build",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/apps/mf2-application",
@@ -49,7 +50,8 @@
       "defaultConfiguration": "production"
     },
     "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
+      "dependsOn": ["^build"],
+      "executor": "./dist/libs/nx-angular-mf:serve",
       "configurations": {
         "production": {
           "buildTarget": "mf2-application:build:production"

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

@@ -1,15 +1,25 @@
 import { BuilderContext, createBuilder } from '@angular-devkit/architect';
+import { buildApplication } from '@angular-devkit/build-angular';
 
 import { BuildExecutorSchema } from './schema';
 
+
 export async function* runBuilder(
   options: BuildExecutorSchema,
   context: BuilderContext
 ) {
   context.logger.info('Run build mf');
-  yield {
-    success: true,
+
+  const { mf: defaultOptionsMfe, ...defaultOptions } = options;
+
+  const extensions = {
+    codePlugins: [],
+    indexHtmlTransformer: (input) => {
+      return input;
+    },
   };
+
+  yield* buildApplication(defaultOptions as any, context, extensions);
 }
 
 export default createBuilder(runBuilder);

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

@@ -1,3 +1,3 @@
 export type SchemaMf = {
-  mf?: {};
+  mf?: Record<string, unknown>;
 };

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

@@ -1,15 +1,62 @@
 import { BuilderContext, createBuilder } 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';
 
+
+function getBuilderAction() {
+  return async function* (options, context, extensions) {
+
+    for await (const result of buildApplicationInternal(
+      options,
+      context,
+      extensions
+    )) {
+      yield result;
+    }
+  };
+}
+
 export async function* runBuilder(
   options: ServeExecutorSchema,
   context: BuilderContext
 ) {
   context.logger.info('Run serve mf');
-  yield {
-    success: true,
+
+
+  const normalizeOuterOptions = await normalizeOptions(
+    context,
+    context.target.project,
+    options as any
+  );
+
+  const extensions = {
+    middleware: [],
+    buildPlugins: [],
   };
+
+  const transforms = {
+    indexHtml: async (input: string) => {
+      return input
+    },
+  };
+
+  const runServer = serveWithVite(
+    normalizeOuterOptions,
+    '@angular-devkit/build-angular:application',
+    getBuilderAction(),
+    context,
+    transforms,
+    extensions
+  );
+  for await (const output of runServer) {
+    yield output;
+  }
 }
 
 export default createBuilder(runBuilder);