@nx/angular 17.2.0-beta.10 → 17.2.0-beta.12

package/executors.d.ts

@@ -1,7 +1,7 @@
-export * from './src/builders/module-federation-dev-server/module-federation-dev-server.impl';
 export * from './src/builders/module-federation-dev-ssr/module-federation-dev-ssr.impl';
 export * from './src/builders/webpack-browser/webpack-browser.impl';
 export * from './src/builders/webpack-server/webpack-server.impl';
+export * from './src/executors/module-federation-dev-server/module-federation-dev-server.impl';
 export * from './src/executors/delegate-build/delegate-build.impl';
 export * from './src/executors/ng-packagr-lite/ng-packagr-lite.impl';
 export * from './src/executors/package/package.impl';

package/executors.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.executeDevServerBuilder = exports.executeWebpackDevServerBuilder = void 0;
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./src/builders/module-federation-dev-server/module-federation-dev-server.impl"), exports);
 tslib_1.__exportStar(require("./src/builders/module-federation-dev-ssr/module-federation-dev-ssr.impl"), exports);
 tslib_1.__exportStar(require("./src/builders/webpack-browser/webpack-browser.impl"), exports);
 tslib_1.__exportStar(require("./src/builders/webpack-server/webpack-server.impl"), exports);
+tslib_1.__exportStar(require("./src/executors/module-federation-dev-server/module-federation-dev-server.impl"), exports);
 tslib_1.__exportStar(require("./src/executors/delegate-build/delegate-build.impl"), exports);
 tslib_1.__exportStar(require("./src/executors/ng-packagr-lite/ng-packagr-lite.impl"), exports);
 tslib_1.__exportStar(require("./src/executors/package/package.impl"), exports);

package/executors.json

@@ -19,6 +19,11 @@
       "implementation": "./src/executors/browser-esbuild/browser-esbuild.impl",
       "schema": "./src/executors/browser-esbuild/schema.json",
       "description": "Builds your application with esbuild and adds support for incremental builds."
+    },
+    "module-federation-dev-server": {
+      "implementation": "./src/executors/module-federation-dev-server/module-federation-dev-server.impl",
+      "schema": "./src/executors/module-federation-dev-server/schema.json",
+      "description": "The module-federation-dev-server executor is reserved exclusively for use with host Module Federation applications. It allows the user to specify which remote applications should be served with the host."
     }
   },
   "builders": {
@@ -37,11 +42,6 @@
       "schema": "./src/builders/webpack-server/schema.json",
       "description": "The `webpack-server` executor is very similar to the standard `server` builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration and NgUniversal for SSR."
     },
-    "module-federation-dev-server": {
-      "implementation": "./src/builders/module-federation-dev-server/module-federation-dev-server.impl",
-      "schema": "./src/builders/module-federation-dev-server/schema.json",
-      "description": "The module-federation-dev-server executor is reserved exclusively for use with host Module Federation applications. It allows the user to specify which remote applications should be served with the host."
-    },
     "module-federation-dev-ssr": {
       "implementation": "./src/builders/module-federation-dev-ssr/module-federation-dev-ssr.impl",
       "schema": "./src/builders/module-federation-dev-ssr/schema.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "17.2.0-beta.10",
+  "version": "17.2.0-beta.12",
   "private": false,
   "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, and Cypress. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Upgrading AngularJS applications \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -78,15 +78,15 @@
     "tslib": "^2.3.0",
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "17.2.0-beta.10",
-    "@nx/cypress": "17.2.0-beta.10",
-    "@nx/jest": "17.2.0-beta.10",
-    "@nx/js": "17.2.0-beta.10",
-    "@nx/eslint": "17.2.0-beta.10",
-    "@nx/webpack": "17.2.0-beta.10",
-    "@nx/web": "17.2.0-beta.10",
-    "@nx/workspace": "17.2.0-beta.10",
-    "@nrwl/angular": "17.2.0-beta.10"
+    "@nx/devkit": "17.2.0-beta.12",
+    "@nx/cypress": "17.2.0-beta.12",
+    "@nx/jest": "17.2.0-beta.12",
+    "@nx/js": "17.2.0-beta.12",
+    "@nx/eslint": "17.2.0-beta.12",
+    "@nx/webpack": "17.2.0-beta.12",
+    "@nx/web": "17.2.0-beta.12",
+    "@nx/workspace": "17.2.0-beta.12",
+    "@nrwl/angular": "17.2.0-beta.12"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",

package/src/builders/dev-server/dev-server.impl.js

@@ -7,9 +7,9 @@ const webpack_nx_build_coordination_plugin_1 = require("@nx/webpack/src/plugins/
 const fs_1 = require("fs");
 const operators_1 = require("nx/src/project-graph/operators");
 const project_graph_1 = require("nx/src/project-graph/project-graph");
+const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const operators_2 = require("rxjs/operators");
-const semver_1 = require("semver");
 const angular_version_utils_1 = require("../../executors/utilities/angular-version-utils");
 const buildable_libs_1 = require("../utilities/buildable-libs");
 const webpack_1 = require("../utilities/webpack");
@@ -57,6 +57,7 @@ function executeDevServerBuilder(rawOptions, context) {
             target: parsedBuildTarget.target,
         });
         dependencies = foundDependencies;
+        const relativeTsConfigPath = (0, devkit_1.normalizePath)((0, path_1.relative)(context.workspaceRoot, tsConfigPath));
         // We can't just pass the tsconfig path in memory to the angular builder
         // function because we can't pass the build target options to it, the build
         // targets options will be retrieved by the builder from the project
@@ -66,21 +67,28 @@ function executeDevServerBuilder(rawOptions, context) {
         const originalGetTargetOptions = context.getTargetOptions;
         context.getTargetOptions = async (target) => {
             const options = await originalGetTargetOptions(target);
-            options.tsConfig = tsConfigPath;
+            options.tsConfig = relativeTsConfigPath;
             return options;
         };
         // The buildTargetConfiguration also needs to use the generated tsconfig path
         // otherwise the build will fail if customWebpack function/file is referencing
         // local libs. This synchronize the behavior with webpack-browser and
         // webpack-server implementation.
-        buildTargetOptions.tsConfig = tsConfigPath;
+        buildTargetOptions.tsConfig = relativeTsConfigPath;
     }
-    const delegateBuilderOptions = getDelegateBuilderOptions(options, buildTarget, context);
+    const delegateBuilderOptions = getDelegateBuilderOptions(options);
     const isUsingWebpackBuilder = ![
         '@angular-devkit/build-angular:application',
         '@angular-devkit/build-angular:browser-esbuild',
         '@nx/angular:browser-esbuild',
     ].includes(buildTarget.executor);
+    /**
+     * The Angular CLI dev-server builder make some decisions based on the build
+     * target builder but it only considers `@angular-devkit/build-angular:*`
+     * builders. Since we are using a custom builder, we patch the context to
+     * handle `@nx/angular:*` executors.
+     */
+    patchBuilderContext(context);
     return (0, rxjs_1.from)(Promise.resolve().then(() => require('@angular-devkit/build-angular'))).pipe((0, operators_2.switchMap)(({ executeDevServerBuilder }) => executeDevServerBuilder(delegateBuilderOptions, context, {
         webpackConfiguration: isUsingWebpackBuilder
             ? async (baseWebpackConfig) => {
@@ -113,26 +121,32 @@ function executeDevServerBuilder(rawOptions, context) {
 }
 exports.executeDevServerBuilder = executeDevServerBuilder;
 exports.default = require('@angular-devkit/architect').createBuilder(executeDevServerBuilder);
-function getDelegateBuilderOptions(options, buildTarget, context) {
-    const delegatedBuilderOptions = { ...options };
-    const { major: angularMajorVersion, version: angularVersion } = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
-    // this option was introduced in angular 16.1.0
-    // https://github.com/angular/angular-cli/commit/3ede1a2cac5005f4dfbd2a62ef528a34c3793b78
-    if ((0, semver_1.gte)(angularVersion, '16.1.0') &&
-        buildTarget.executor === '@nx/angular:browser-esbuild') {
-        delegatedBuilderOptions.forceEsbuild = true;
-        const originalLoggerWarn = context.logger.warn.bind(context.logger);
-        context.logger.warn = (...args) => {
-            // we silence the warning about forcing esbuild from third-party builders
-            if (args[0].includes('Warning: Forcing the use of the esbuild-based build system with third-party builders may cause unexpected behavior and/or build failures.')) {
-                return;
-            }
-            originalLoggerWarn(...args);
-        };
-    }
+function getDelegateBuilderOptions(options) {
+    const delegateBuilderOptions = {
+        ...options,
+    };
+    const { major: angularMajorVersion } = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
     if (angularMajorVersion <= 17) {
-        delegatedBuilderOptions.browserTarget = delegatedBuilderOptions.buildTarget;
-        delete delegatedBuilderOptions.buildTarget;
+        delegateBuilderOptions.browserTarget = delegateBuilderOptions.buildTarget;
+        delete delegateBuilderOptions.buildTarget;
     }
-    return delegatedBuilderOptions;
+    // delete extra option not supported by the delegate builder
+    delete delegateBuilderOptions.buildLibsFromSource;
+    return delegateBuilderOptions;
+}
+const executorToBuilderMap = new Map([
+    [
+        '@nx/angular:browser-esbuild',
+        '@angular-devkit/build-angular:browser-esbuild',
+    ],
+]);
+function patchBuilderContext(context) {
+    const originalGetBuilderNameForTarget = context.getBuilderNameForTarget;
+    context.getBuilderNameForTarget = async (target) => {
+        const builderName = await originalGetBuilderNameForTarget(target);
+        if (executorToBuilderMap.has(builderName)) {
+            return executorToBuilderMap.get(builderName);
+        }
+        return builderName;
+    };
 }

package/src/builders/utilities/module-federation.js

@@ -85,7 +85,7 @@ function getStaticRemotes(project, context, workspaceProjects, remotesToSkip) {
 }
 exports.getStaticRemotes = getStaticRemotes;
 function validateDevRemotes(options, workspaceProjects) {
-    const invalidDevRemotes = options.devRemotes?.filter((remote) => !workspaceProjects[remote]);
+    const invalidDevRemotes = options.devRemotes?.filter((remote) => !workspaceProjects[remote]) ?? [];
     if (invalidDevRemotes.length) {
         throw new Error(invalidDevRemotes.length === 1
             ? `Invalid dev remote provided: ${invalidDevRemotes[0]}.`

package/src/builders/webpack-browser/webpack-browser.impl.js

@@ -7,6 +7,7 @@ const fs_1 = require("fs");
 const configuration_1 = require("nx/src/config/configuration");
 const operators_1 = require("nx/src/project-graph/operators");
 const utils_1 = require("nx/src/tasks-runner/utils");
+const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const operators_2 = require("rxjs/operators");
 const buildable_libs_1 = require("../utilities/buildable-libs");
@@ -40,7 +41,7 @@ function executeWebpackBrowserBuilder(options, context) {
         projectGraph = (0, devkit_1.readCachedProjectGraph)();
         const { tsConfigPath, dependencies: foundDependencies } = (0, buildable_libs_1.createTmpTsConfigForBuildableLibs)(delegateBuilderOptions.tsConfig, context, { projectGraph });
         dependencies = foundDependencies;
-        delegateBuilderOptions.tsConfig = tsConfigPath;
+        delegateBuilderOptions.tsConfig = (0, devkit_1.normalizePath)((0, path_1.relative)(context.workspaceRoot, tsConfigPath));
     }
     return (0, rxjs_1.from)(Promise.resolve().then(() => require('@angular-devkit/build-angular'))).pipe((0, operators_2.switchMap)(({ executeBrowserBuilder }) => executeBrowserBuilder(delegateBuilderOptions, context, {
         webpackConfiguration: (baseWebpackConfig) => {

package/src/builders/webpack-server/webpack-server.impl.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.executeWebpackServerBuilder = void 0;
 const devkit_1 = require("@nx/devkit");
 const fs_1 = require("fs");
+const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const buildable_libs_1 = require("../utilities/buildable-libs");
@@ -50,7 +51,7 @@ function executeWebpackServerBuilder(options, context) {
     options.buildLibsFromSource ??= true;
     if (!options.buildLibsFromSource) {
         const { tsConfigPath } = (0, buildable_libs_1.createTmpTsConfigForBuildableLibs)(options.tsConfig, context);
-        options.tsConfig = tsConfigPath;
+        options.tsConfig = (0, devkit_1.normalizePath)((0, path_1.relative)(context.workspaceRoot, tsConfigPath));
     }
     return buildServerApp(options, context);
 }

package/src/executors/module-federation-dev-server/lib/build-static-remotes.d.ts

@@ -0,0 +1,7 @@
+import { type Schema } from '../schema';
+import { type ExecutorContext } from '@nx/devkit';
+export declare function buildStaticRemotes(remotes: {
+    remotePorts: any[];
+    staticRemotes: string[];
+    devRemotes: string[];
+}, nxBin: any, context: ExecutorContext, options: Schema): Promise<void>;

package/src/executors/module-federation-dev-server/lib/build-static-remotes.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildStaticRemotes = void 0;
+const devkit_1 = require("@nx/devkit");
+const child_process_1 = require("child_process");
+async function buildStaticRemotes(remotes, nxBin, context, options) {
+    if (!remotes.staticRemotes ||
+        (Array.isArray(remotes.staticRemotes) && !remotes.staticRemotes.length)) {
+        return;
+    }
+    const mappedLocationOfRemotes = {};
+    for (const app of remotes.staticRemotes) {
+        mappedLocationOfRemotes[app] = `http${options.ssl ? 's' : ''}://${options.host}:${options.staticRemotesPort}/${app}`;
+    }
+    process.env.NX_MF_DEV_SERVER_STATIC_REMOTES = JSON.stringify(mappedLocationOfRemotes);
+    await new Promise((res) => {
+        devkit_1.logger.info(`NX Building ${remotes.staticRemotes.length} static remotes...`);
+        const staticProcess = (0, child_process_1.fork)(nxBin, [
+            'run-many',
+            `--target=build`,
+            `--projects=${remotes.staticRemotes.join(',')}`,
+            ...(context.configurationName
+                ? [`--configuration=${context.configurationName}`]
+                : []),
+            ...(options.parallel ? [`--parallel=${options.parallel}`] : []),
+        ], {
+            cwd: context.root,
+            stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
+        });
+        staticProcess.stdout.on('data', (data) => {
+            const ANSII_CODE_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
+            const stdoutString = data.toString().replace(ANSII_CODE_REGEX, '');
+            if (stdoutString.includes('Successfully ran target build')) {
+                staticProcess.stdout.removeAllListeners('data');
+                devkit_1.logger.info(`NX Built ${remotes.staticRemotes.length} static remotes`);
+                res();
+            }
+        });
+        staticProcess.stderr.on('data', (data) => devkit_1.logger.info(data.toString()));
+        staticProcess.on('exit', (code) => {
+            if (code !== 0) {
+                throw new Error(`Remotes failed to build. See above for errors.`);
+            }
+        });
+        process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
+        process.on('exit', () => staticProcess.kill('SIGTERM'));
+    });
+}
+exports.buildStaticRemotes = buildStaticRemotes;

package/src/executors/module-federation-dev-server/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from './build-static-remotes';
+export * from './normalize-options';
+export * from './start-dev-remotes';
+export * from './start-static-remotes-file-server';

package/src/executors/module-federation-dev-server/lib/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./build-static-remotes"), exports);
+tslib_1.__exportStar(require("./normalize-options"), exports);
+tslib_1.__exportStar(require("./start-dev-remotes"), exports);
+tslib_1.__exportStar(require("./start-static-remotes-file-server"), exports);

package/src/executors/module-federation-dev-server/lib/normalize-options.d.ts

@@ -0,0 +1,2 @@
+import type { NormalizedSchema, Schema } from '../schema';
+export declare function normalizeOptions(schema: Schema): NormalizedSchema;

package/src/executors/module-federation-dev-server/lib/normalize-options.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = void 0;
+function normalizeOptions(schema) {
+    let buildTarget = schema.buildTarget;
+    if (schema.browserTarget) {
+        buildTarget ??= schema.browserTarget;
+        delete schema.browserTarget;
+    }
+    return {
+        ...schema,
+        buildTarget,
+        host: schema.host ?? 'localhost',
+        port: schema.port ?? 4200,
+        liveReload: schema.liveReload ?? true,
+        open: schema.open ?? false,
+        ssl: schema.ssl ?? false,
+    };
+}
+exports.normalizeOptions = normalizeOptions;

package/src/executors/module-federation-dev-server/lib/start-dev-remotes.d.ts

@@ -0,0 +1,9 @@
+import { type Schema } from '../schema';
+import { type ExecutorContext, type ProjectConfiguration } from '@nx/devkit';
+export declare function startDevRemotes(remotes: {
+    remotePorts: any[];
+    staticRemotes: string[];
+    devRemotes: string[];
+}, workspaceProjects: Record<string, ProjectConfiguration>, options: Schema, context: ExecutorContext): Promise<AsyncIterable<{
+    success: boolean;
+}>[]>;

package/src/executors/module-federation-dev-server/lib/start-dev-remotes.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startDevRemotes = void 0;
+const devkit_1 = require("@nx/devkit");
+async function startDevRemotes(remotes, workspaceProjects, options, context) {
+    const devRemotesIters = [];
+    for (const app of remotes.devRemotes) {
+        if (!workspaceProjects[app].targets?.['serve']) {
+            throw new Error(`Could not find "serve" target in "${app}" project.`);
+        }
+        else if (!workspaceProjects[app].targets?.['serve'].executor) {
+            throw new Error(`Could not find executor for "serve" target in "${app}" project.`);
+        }
+        const [collection, executor] = workspaceProjects[app].targets['serve'].executor.split(':');
+        const isUsingModuleFederationDevServerExecutor = executor.includes('module-federation-dev-server');
+        devRemotesIters.push(await (0, devkit_1.runExecutor)({
+            project: app,
+            target: 'serve',
+            configuration: context.configurationName,
+        }, {
+            verbose: options.verbose ?? false,
+            ...(isUsingModuleFederationDevServerExecutor
+                ? { isInitialHost: false }
+                : {}),
+        }, context));
+    }
+    return devRemotesIters;
+}
+exports.startDevRemotes = startDevRemotes;

package/src/executors/module-federation-dev-server/lib/start-static-remotes-file-server.d.ts

@@ -0,0 +1,12 @@
+import { type ExecutorContext } from '@nx/devkit';
+import { type Schema } from '../schema';
+export declare function startStaticRemotesFileServer(remotes: {
+    remotePorts: any[];
+    staticRemotes: string[];
+    devRemotes: string[];
+}, context: ExecutorContext, options: Schema): AsyncGenerator<{
+    success: boolean;
+    baseUrl: string;
+}, {
+    success: boolean;
+}, unknown>;

package/src/executors/module-federation-dev-server/lib/start-static-remotes-file-server.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startStaticRemotesFileServer = void 0;
+const devkit_1 = require("@nx/devkit");
+const file_server_impl_1 = require("@nx/web/src/executors/file-server/file-server.impl");
+const path_1 = require("path");
+const fs_1 = require("fs");
+function startStaticRemotesFileServer(remotes, context, options) {
+    let shouldMoveToCommonLocation = false;
+    let commonOutputDirectory;
+    for (const app of remotes.staticRemotes) {
+        const outputPath = context.projectGraph.nodes[app].data.targets['build'].options.outputPath;
+        const directoryOfOutputPath = (0, path_1.dirname)(outputPath);
+        if (!commonOutputDirectory) {
+            commonOutputDirectory = directoryOfOutputPath;
+        }
+        else if (commonOutputDirectory !== directoryOfOutputPath ||
+            !outputPath.endsWith(app)) {
+            shouldMoveToCommonLocation = true;
+        }
+    }
+    if (shouldMoveToCommonLocation) {
+        commonOutputDirectory = (0, path_1.join)(devkit_1.workspaceRoot, 'tmp/static-remotes');
+        for (const app of remotes.staticRemotes) {
+            const outputPath = context.projectGraph.nodes[app].data.targets['build'].options
+                .outputPath;
+            (0, fs_1.cpSync)(outputPath, (0, path_1.join)(commonOutputDirectory, app), {
+                force: true,
+                recursive: true,
+            });
+        }
+    }
+    const staticRemotesIter = (0, file_server_impl_1.default)({
+        cors: true,
+        watch: false,
+        staticFilePath: commonOutputDirectory,
+        parallel: false,
+        spa: false,
+        withDeps: false,
+        host: options.host,
+        port: options.staticRemotesPort,
+        ssl: options.ssl,
+        sslCert: options.sslCert,
+        sslKey: options.sslKey,
+    }, context);
+    return staticRemotesIter;
+}
+exports.startStaticRemotesFileServer = startStaticRemotesFileServer;

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.d.ts

@@ -0,0 +1,3 @@
+import { type ExecutorContext } from '@nx/devkit';
+import { type Schema } from './schema';
+export default function moduleFederationDevServerExecutor(schema: Schema, context: ExecutorContext): AsyncGenerator<any, any, undefined>;

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+const lib_1 = require("./lib");
+const rxjs_for_await_1 = require("@nx/devkit/src/utils/rxjs-for-await");
+const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
+const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
+const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
+const file_server_impl_1 = require("@nx/web/src/executors/file-server/file-server.impl");
+const ngcli_adapter_1 = require("nx/src/adapter/ngcli-adapter");
+const dev_server_impl_1 = require("../../builders/dev-server/dev-server.impl");
+const module_federation_2 = require("../../builders/utilities/module-federation");
+const path_1 = require("path");
+const fs_1 = require("fs");
+async function* moduleFederationDevServerExecutor(schema, context) {
+    // Force Node to resolve to look for the nx binary that is inside node_modules
+    const nxBin = require.resolve('nx/bin/nx');
+    const options = (0, lib_1.normalizeOptions)(schema);
+    options.staticRemotesPort ??= options.port + 1;
+    const { projects: workspaceProjects } = (0, devkit_1.readProjectsConfigurationFromProjectGraph)(context.projectGraph);
+    const project = workspaceProjects[context.projectName];
+    const currIter = options.static
+        ? (0, file_server_impl_1.default)({
+            port: options.port,
+            host: options.host,
+            ssl: options.ssl,
+            buildTarget: options.buildTarget,
+            parallel: false,
+            spa: false,
+            withDeps: false,
+            cors: true,
+        }, context)
+        : (0, rxjs_for_await_1.eachValueFrom)((0, dev_server_impl_1.executeDevServerBuilder)(options, await (0, ngcli_adapter_1.createBuilderContext)({
+            builderName: '@nx/angular:webpack-browser',
+            description: 'Build a browser application',
+            optionSchema: await Promise.resolve().then(() => require('../../builders/webpack-browser/schema.json')),
+        }, context)));
+    if (options.isInitialHost === false) {
+        return yield* currIter;
+    }
+    let pathToManifestFile = (0, path_1.join)(context.root, project.sourceRoot, 'assets/module-federation.manifest.json');
+    if (options.pathToManifestFile) {
+        const userPathToManifestFile = (0, path_1.join)(context.root, options.pathToManifestFile);
+        if (!(0, fs_1.existsSync)(userPathToManifestFile)) {
+            throw new Error(`The provided Module Federation manifest file path does not exist. Please check the file exists at "${userPathToManifestFile}".`);
+        }
+        else if ((0, path_1.extname)(options.pathToManifestFile) !== '.json') {
+            throw new Error(`The Module Federation manifest file must be a JSON. Please ensure the file at ${userPathToManifestFile} is a JSON.`);
+        }
+        pathToManifestFile = userPathToManifestFile;
+    }
+    (0, module_federation_2.validateDevRemotes)(options, workspaceProjects);
+    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(project.targets.build.options.tsConfig, context.root, project.root, 'angular');
+    const remotes = (0, module_federation_1.getRemotes)(options.devRemotes, options.skipRemotes, moduleFederationConfig, {
+        projectName: project.name,
+        projectGraph: context.projectGraph,
+        root: context.root,
+    }, pathToManifestFile);
+    if (remotes.devRemotes.length > 0 && !schema.staticRemotesPort) {
+        options.staticRemotesPort = options.devRemotes.reduce((portToUse, r) => {
+            const remotePort = context.projectGraph.nodes[r].data.targets['serve'].options.port;
+            if (remotePort >= portToUse) {
+                return remotePort + 1;
+            }
+            else {
+                return portToUse;
+            }
+        }, options.staticRemotesPort);
+    }
+    await (0, lib_1.buildStaticRemotes)(remotes, nxBin, context, options);
+    const devRemoteIters = await (0, lib_1.startDevRemotes)(remotes, workspaceProjects, options, context);
+    const staticRemotesIter = remotes.staticRemotes.length > 0
+        ? (0, lib_1.startStaticRemotesFileServer)(remotes, context, options)
+        : undefined;
+    const removeBaseUrlEmission = (iter) => (0, async_iterable_1.mapAsyncIterable)(iter, (v) => ({
+        ...v,
+        baseUrl: undefined,
+    }));
+    return yield* (0, async_iterable_1.combineAsyncIterables)(removeBaseUrlEmission(currIter), ...devRemoteIters.map(removeBaseUrlEmission), ...(staticRemotesIter ? [removeBaseUrlEmission(staticRemotesIter)] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
+        if (!options.isInitialHost) {
+            done();
+            return;
+        }
+        if (remotes.remotePorts.length === 0) {
+            devkit_1.logger.info(`NX All remotes started, server ready at http://localhost:${options.port}`);
+            next({ success: true, baseUrl: `http://localhost:${options.port}` });
+            done();
+            return;
+        }
+        try {
+            const portsToWaitFor = staticRemotesIter
+                ? [options.staticRemotesPort, ...remotes.remotePorts]
+                : [...remotes.remotePorts];
+            await Promise.all(portsToWaitFor.map((port) => (0, wait_for_port_open_1.waitForPortOpen)(port, {
+                retries: 480,
+                retryDelay: 2500,
+                host: 'localhost',
+            })));
+            devkit_1.logger.info(`NX All remotes started, server ready at http://localhost:${options.port}`);
+            next({ success: true, baseUrl: `http://localhost:${options.port}` });
+        }
+        catch {
+            throw new Error(`Timed out waiting for remote to start. Check above for any errors.`);
+        }
+        finally {
+            done();
+        }
+    }));
+}
+exports.default = moduleFederationDevServerExecutor;

package/src/{builders → executors}/module-federation-dev-server/schema.json

@@ -1,8 +1,7 @@
 {
-  "version": 2,
-  "outputCapture": "direct-nodejs",
   "$schema": "http://json-schema.org/draft-07/schema",
   "title": "Schema for Module Federation Dev Server",
+  "outputCapture": "direct-nodejs",
   "description": "The module-federation-dev-server executor is reserved exclusively for use with host Module Federation applications. It allows the user to specify which remote applications should be served with the host.",
   "type": "object",
   "presets": [
@@ -149,6 +148,13 @@
     }
   },
   "additionalProperties": false,
-  "anyOf": [{ "required": ["buildTarget"] }, { "required": ["browserTarget"] }],
+  "anyOf": [
+    {
+      "required": ["buildTarget"]
+    },
+    {
+      "required": ["browserTarget"]
+    }
+  ],
   "examplesFile": "../../../docs/module-federation-dev-server-examples.md"
 }

package/src/builders/module-federation-dev-server/module-federation-dev-server.impl.d.ts

@@ -1,5 +0,0 @@
-import type { Schema } from './schema';
-import { executeDevServerBuilder } from '../dev-server/dev-server.impl';
-export declare function executeModuleFederationDevServerBuilder(schema: Schema, context: import('@angular-devkit/architect').BuilderContext): ReturnType<typeof executeDevServerBuilder | any>;
-declare const _default: any;
-export default _default;

package/src/builders/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -1,232 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.executeModuleFederationDevServerBuilder = void 0;
-const devkit_1 = require("@nx/devkit");
-const ngcli_adapter_1 = require("nx/src/adapter/ngcli-adapter");
-const dev_server_impl_1 = require("../dev-server/dev-server.impl");
-const project_graph_1 = require("nx/src/project-graph/project-graph");
-const executor_utils_1 = require("nx/src/command-line/run/executor-utils");
-const module_federation_1 = require("../utilities/module-federation");
-const fs_1 = require("fs");
-const path_1 = require("path");
-const module_federation_2 = require("@nx/webpack/src/utils/module-federation");
-const child_process_1 = require("child_process");
-const rxjs_1 = require("rxjs");
-const fs_2 = require("fs");
-function buildStaticRemotes(remotes, nxBin, context, options) {
-    if (!remotes.staticRemotes.length) {
-        return Promise.resolve();
-    }
-    const mappedLocationOfRemotes = {};
-    for (const app of remotes.staticRemotes) {
-        mappedLocationOfRemotes[app] = `http${options.ssl ? 's' : ''}://${options.host}:${options.staticRemotesPort}/${app}`;
-    }
-    process.env.NX_MF_DEV_SERVER_STATIC_REMOTES = JSON.stringify(mappedLocationOfRemotes);
-    const staticRemoteBuildPromise = new Promise((res) => {
-        devkit_1.logger.info(`NX Building ${remotes.staticRemotes.length} static remotes...`);
-        const staticProcess = (0, child_process_1.fork)(nxBin, [
-            'run-many',
-            `--target=build`,
-            `--projects=${remotes.staticRemotes.join(',')}`,
-            ...(context.target.configuration
-                ? [`--configuration=${context.target.configuration}`]
-                : []),
-            ...(options.parallel ? [`--parallel=${options.parallel}`] : []),
-        ], {
-            cwd: context.workspaceRoot,
-            stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
-        });
-        staticProcess.stdout.on('data', (data) => {
-            const ANSII_CODE_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
-            const stdoutString = data.toString().replace(ANSII_CODE_REGEX, '');
-            if (stdoutString.includes('Successfully ran target build')) {
-                staticProcess.stdout.removeAllListeners('data');
-                devkit_1.logger.info(`NX Built ${remotes.staticRemotes.length} static remotes`);
-                res();
-            }
-        });
-        staticProcess.stderr.on('data', (data) => devkit_1.logger.info(data.toString()));
-        staticProcess.on('exit', (code) => {
-            if (code !== 0) {
-                throw new Error(`Remotes failed to build. See above for errors.`);
-            }
-        });
-        process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
-        process.on('exit', () => staticProcess.kill('SIGTERM'));
-    });
-    return staticRemoteBuildPromise;
-}
-function startStaticRemotesFileServer(remotes, projectGraph, options, context) {
-    let shouldMoveToCommonLocation = false;
-    let commonOutputDirectory;
-    for (const app of remotes.staticRemotes) {
-        const outputPath = projectGraph.nodes[app].data.targets['build'].options.outputPath;
-        const directoryOfOutputPath = (0, path_1.dirname)(outputPath);
-        if (!commonOutputDirectory) {
-            commonOutputDirectory = directoryOfOutputPath;
-        }
-        else if (commonOutputDirectory !== directoryOfOutputPath ||
-            !outputPath.endsWith(app)) {
-            shouldMoveToCommonLocation = true;
-        }
-    }
-    if (shouldMoveToCommonLocation) {
-        commonOutputDirectory = (0, path_1.join)(devkit_1.workspaceRoot, 'tmp/static-remotes');
-        for (const app of remotes.staticRemotes) {
-            const outputPath = projectGraph.nodes[app].data.targets['build'].options.outputPath;
-            (0, fs_2.cpSync)(outputPath, (0, path_1.join)(commonOutputDirectory, app), {
-                force: true,
-                recursive: true,
-            });
-        }
-    }
-    const staticRemotesIter$ = (0, rxjs_1.from)(Promise.resolve().then(() => require('@nx/web/src/executors/file-server/file-server.impl'))).pipe((0, rxjs_1.switchMap)((fileServerExecutor) => fileServerExecutor.default({
-        cors: true,
-        watch: false,
-        staticFilePath: commonOutputDirectory,
-        parallel: false,
-        spa: false,
-        withDeps: false,
-        host: options.host,
-        port: options.staticRemotesPort,
-        ssl: options.ssl,
-        sslCert: options.sslCert,
-        sslKey: options.sslKey,
-    }, {
-        projectGraph,
-        root: context.workspaceRoot,
-        target: projectGraph.nodes[context.target.project].data.targets[context.target.target],
-        targetName: context.target.target,
-        projectName: context.target.project,
-        configurationName: context.target.configuration,
-        cwd: context.currentDirectory,
-        isVerbose: options.verbose,
-        projectsConfigurations: (0, project_graph_1.readProjectsConfigurationFromProjectGraph)(projectGraph),
-        nxJsonConfiguration: (0, devkit_1.readNxJson)(),
-    })));
-    return staticRemotesIter$;
-}
-function startDevRemotes(remotes, workspaceProjects, options, context) {
-    const devRemotes$ = [];
-    for (const app of remotes.devRemotes) {
-        if (!workspaceProjects[app].targets?.['serve']) {
-            throw new Error(`Could not find "serve" target in "${app}" project.`);
-        }
-        else if (!workspaceProjects[app].targets?.['serve'].executor) {
-            throw new Error(`Could not find executor for "serve" target in "${app}" project.`);
-        }
-        const runOptions = {};
-        const [collection, executor] = workspaceProjects[app].targets['serve'].executor.split(':');
-        const isUsingModuleFederationDevServerExecutor = executor.includes('module-federation-dev-server');
-        const { schema } = (0, executor_utils_1.getExecutorInformation)(collection, executor, devkit_1.workspaceRoot, workspaceProjects);
-        if ((options.verbose && schema.additionalProperties) ||
-            'verbose' in schema.properties) {
-            runOptions.verbose = options.verbose;
-        }
-        if (isUsingModuleFederationDevServerExecutor) {
-            runOptions.isInitialHost = false;
-        }
-        const serve$ = (0, ngcli_adapter_1.scheduleTarget)(context.workspaceRoot, {
-            project: app,
-            target: 'serve',
-            configuration: context.target.configuration,
-            runOptions,
-            projects: workspaceProjects,
-        }, options.verbose).then((obs) => {
-            obs.toPromise().catch((err) => {
-                throw new Error(`Remote '${app}' failed to serve correctly due to the following: \r\n${err.toString()}`);
-            });
-        });
-        devRemotes$.push(serve$);
-    }
-    return devRemotes$;
-}
-function executeModuleFederationDevServerBuilder(schema, context) {
-    // Force Node to resolve to look for the nx binary that is inside node_modules
-    const nxBin = require.resolve('nx/bin/nx');
-    const options = normalizeOptions(schema);
-    options.staticRemotesPort ??= options.port + 1;
-    const projectGraph = (0, devkit_1.readCachedProjectGraph)();
-    const { projects: workspaceProjects } = (0, project_graph_1.readProjectsConfigurationFromProjectGraph)(projectGraph);
-    const project = workspaceProjects[context.target.project];
-    const staticFileServer = (0, rxjs_1.from)(Promise.resolve().then(() => require('@nx/web/src/executors/file-server/file-server.impl'))).pipe((0, rxjs_1.switchMap)((fileServerExecutor) => fileServerExecutor.default({
-        port: options.port,
-        host: options.host,
-        ssl: options.ssl,
-        buildTarget: options.buildTarget,
-        parallel: false,
-        spa: false,
-        withDeps: false,
-        cors: true,
-    }, {
-        projectGraph,
-        root: context.workspaceRoot,
-        target: projectGraph.nodes[context.target.project].data.targets[context.target.target],
-        targetName: context.target.target,
-        projectName: context.target.project,
-        configurationName: context.target.configuration,
-        cwd: context.currentDirectory,
-        isVerbose: options.verbose,
-        projectsConfigurations: { projects: workspaceProjects, version: 2 },
-        nxJsonConfiguration: (0, devkit_1.readNxJson)(),
-    })));
-    const webpackDevServer = (0, dev_server_impl_1.executeDevServerBuilder)(options, context);
-    const currExecutor = options.static ? staticFileServer : webpackDevServer;
-    if (options.isInitialHost === false) {
-        return currExecutor;
-    }
-    let pathToManifestFile = (0, path_1.join)(context.workspaceRoot, project.sourceRoot, 'assets/module-federation.manifest.json');
-    if (options.pathToManifestFile) {
-        const userPathToManifestFile = (0, path_1.join)(context.workspaceRoot, options.pathToManifestFile);
-        if (!(0, fs_1.existsSync)(userPathToManifestFile)) {
-            throw new Error(`The provided Module Federation manifest file path does not exist. Please check the file exists at "${userPathToManifestFile}".`);
-        }
-        else if ((0, path_1.extname)(options.pathToManifestFile) !== '.json') {
-            throw new Error(`The Module Federation manifest file must be a JSON. Please ensure the file at ${userPathToManifestFile} is a JSON.`);
-        }
-        pathToManifestFile = userPathToManifestFile;
-    }
-    (0, module_federation_1.validateDevRemotes)(options, workspaceProjects);
-    const moduleFederationConfig = (0, module_federation_2.getModuleFederationConfig)(project.targets.build.options.tsConfig, context.workspaceRoot, project.root, 'angular');
-    const remotes = (0, module_federation_2.getRemotes)(options.devRemotes, options.skipRemotes, moduleFederationConfig, {
-        projectName: project.name,
-        projectGraph,
-        root: context.workspaceRoot,
-    }, pathToManifestFile);
-    if (remotes.devRemotes.length > 0 && !schema.staticRemotesPort) {
-        options.staticRemotesPort = options.devRemotes.reduce((portToUse, r) => {
-            const remotePort = projectGraph.nodes[r].data.targets['serve'].options.port;
-            if (remotePort >= portToUse) {
-                return remotePort + 1;
-            }
-        }, options.staticRemotesPort);
-    }
-    const staticRemoteBuildPromise = buildStaticRemotes(remotes, nxBin, context, options);
-    return (0, rxjs_1.from)(staticRemoteBuildPromise).pipe((0, rxjs_1.concatMap)(() => {
-        const staticRemotesIter$ = remotes.staticRemotes.length > 0
-            ? startStaticRemotesFileServer(remotes, projectGraph, options, context)
-            : (0, rxjs_1.from)(Promise.resolve());
-        const devRemotes$ = startDevRemotes(remotes, workspaceProjects, options, context);
-        return devRemotes$.length > 0
-            ? (0, rxjs_1.combineLatest)([...devRemotes$, staticRemotesIter$]).pipe((0, rxjs_1.concatMap)(() => currExecutor))
-            : (0, rxjs_1.from)(staticRemotesIter$).pipe((0, rxjs_1.concatMap)(() => currExecutor));
-    }));
-}
-exports.executeModuleFederationDevServerBuilder = executeModuleFederationDevServerBuilder;
-exports.default = require('@angular-devkit/architect').createBuilder(executeModuleFederationDevServerBuilder);
-function normalizeOptions(schema) {
-    let buildTarget = schema.buildTarget;
-    if (schema.browserTarget) {
-        buildTarget ??= schema.browserTarget;
-        delete schema.browserTarget;
-    }
-    return {
-        ...schema,
-        buildTarget,
-        host: schema.host ?? 'localhost',
-        port: schema.port ?? 4200,
-        liveReload: schema.liveReload ?? true,
-        open: schema.open ?? false,
-        ssl: schema.ssl ?? false,
-    };
-}