@nx/angular 0.0.0-pr-22179-271588f

package/module-federation/index.d.ts

@@ -0,0 +1,2 @@
+export { withModuleFederation } from '../src/utils/mf/with-module-federation';
+export { withModuleFederationForSSR } from '../src/utils/mf/with-module-federation-ssr';

package/module-federation/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withModuleFederationForSSR = exports.withModuleFederation = void 0;
+var with_module_federation_1 = require("../src/utils/mf/with-module-federation");
+Object.defineProperty(exports, "withModuleFederation", { enumerable: true, get: function () { return with_module_federation_1.withModuleFederation; } });
+var with_module_federation_ssr_1 = require("../src/utils/mf/with-module-federation-ssr");
+Object.defineProperty(exports, "withModuleFederationForSSR", { enumerable: true, get: function () { return with_module_federation_ssr_1.withModuleFederationForSSR; } });

package/ng-package.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts"
+  },
+  "dest": "../../build/packages/angular",
+  "deleteDestPath": false,
+  "allowedNonPeerDependencies": [
+    "@nx/",
+    "@angular-devkit",
+    "@angular-eslint/",
+    "@schematics",
+    "@phenomnomnominal/tsquery",
+    "@typescript-eslint/",
+    "chalk",
+    "ignore",
+    "minimatch",
+    "rxjs-for-await",
+    "webpack-merge",
+    "ts-node",
+    "tsconfig-paths",
+    "semver",
+    "webpack",
+    "http-server",
+    "magic-string",
+    "enquirer",
+    "find-cache-dir",
+    "piscina"
+  ],
+  "keepLifecycleScripts": true
+}

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@nx/angular",
+  "version": "0.0.0-pr-22179-271588f",
+  "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- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nrwl/nx.git",
+    "directory": "packages/angular"
+  },
+  "keywords": [
+    "Monorepo",
+    "Angular",
+    "Jest",
+    "Cypress",
+    "CLI"
+  ],
+  "exports": {
+    "./migrations.json": "./migrations.json",
+    "./generators.json": "./generators.json",
+    "./executors.json": "./executors.json",
+    "./generators": "./generators.js",
+    "./executors": "./executors.js",
+    "./tailwind": "./tailwind.js",
+    "./module-federation": "./module-federation/index.js",
+    "./src/utils": "./src/utils/public-api.js",
+    "./plugins/component-testing": "./plugins/component-testing.js",
+    "./src/generators/utils": "./src/generators/utils/index.js",
+    "./src/generators/move/move-impl": "./src/generators/move/move-impl.js",
+    "./src/builders/*/schema.json": "./src/builders/*/schema.json",
+    "./src/builders/*.impl": "./src/builders/*.impl.js",
+    "./src/executors/*/schema.json": "./src/executors/*/schema.json",
+    "./src/executors/*.impl": "./src/executors/*.impl.js",
+    "./src/executors/*/compat": "./src/executors/*/compat.js",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/nx-angular.mjs",
+      "esm": "./esm2022/nx-angular.mjs",
+      "default": "./fesm2022/nx-angular.mjs"
+    },
+    "./mf": {
+      "types": "./mf/index.d.ts",
+      "esm2022": "./esm2022/mf/nx-angular-mf.mjs",
+      "esm": "./esm2022/mf/nx-angular-mf.mjs",
+      "default": "./fesm2022/nx-angular-mf.mjs"
+    },
+    "./testing": {
+      "types": "./testing/index.d.ts",
+      "esm2022": "./esm2022/testing/nx-angular-testing.mjs",
+      "esm": "./esm2022/testing/nx-angular-testing.mjs",
+      "default": "./fesm2022/nx-angular-testing.mjs"
+    }
+  },
+  "author": "Victor Savkin",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/nrwl/nx/issues"
+  },
+  "homepage": "https://nx.dev",
+  "executors": "./executors.json",
+  "generators": "./generators.json",
+  "ng-update": {
+    "requirements": {},
+    "migrations": "./migrations.json"
+  },
+  "dependencies": {
+    "@phenomnomnominal/tsquery": "~5.0.1",
+    "@typescript-eslint/type-utils": "^6.9.1",
+    "chalk": "^4.1.0",
+    "find-cache-dir": "^3.3.2",
+    "ignore": "^5.0.4",
+    "magic-string": "~0.30.2",
+    "minimatch": "9.0.3",
+    "semver": "^7.5.3",
+    "tslib": "^2.3.0",
+    "webpack": "^5.80.0",
+    "webpack-merge": "^5.8.0",
+    "@nx/devkit": "0.0.0-pr-22179-271588f",
+    "@nx/js": "0.0.0-pr-22179-271588f",
+    "@nx/eslint": "0.0.0-pr-22179-271588f",
+    "@nx/webpack": "0.0.0-pr-22179-271588f",
+    "@nx/web": "0.0.0-pr-22179-271588f",
+    "@nx/workspace": "0.0.0-pr-22179-271588f",
+    "piscina": "^4.2.1",
+    "@nrwl/angular": "0.0.0-pr-22179-271588f"
+  },
+  "peerDependencies": {
+    "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",
+    "@angular-devkit/core": ">= 15.0.0 < 18.0.0",
+    "@angular-devkit/schematics": ">= 15.0.0 < 18.0.0",
+    "@schematics/angular": ">= 15.0.0 < 18.0.0",
+    "esbuild": "^0.19.2",
+    "rxjs": "^6.5.3 || ^7.5.0"
+  },
+  "peerDependenciesMeta": {
+    "esbuild": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/nx-angular.mjs",
+  "typings": "index.d.ts",
+  "sideEffects": false
+}

package/plugins/component-testing.d.ts

@@ -0,0 +1,20 @@
+import { NxComponentTestingOptions } from '@nx/cypress/plugins/cypress-preset';
+/**
+ * Angular nx preset for Cypress Component Testing
+ *
+ * This preset contains the base configuration
+ * for your component tests that nx recommends.
+ * including a devServer that supports nx workspaces.
+ * you can easily extend this within your cypress config via spreading the preset
+ * @example
+ * export default defineConfig({
+ *   component: {
+ *     ...nxComponentTestingPreset(__filename)
+ *     // add your own config here
+ *   }
+ * })
+ *
+ * @param pathToConfig will be used for loading project options and to construct the output paths for videos and screenshots
+ * @param options override options
+ */
+export declare function nxComponentTestingPreset(pathToConfig: string, options?: NxComponentTestingOptions): any;

package/plugins/component-testing.js

@@ -0,0 +1,325 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nxComponentTestingPreset = void 0;
+const cypress_preset_1 = require("@nx/cypress/plugins/cypress-preset");
+const ct_helpers_1 = require("@nx/cypress/src/utils/ct-helpers");
+const devkit_1 = require("@nx/devkit");
+const fs_1 = require("fs");
+const path_1 = require("path");
+const semver_1 = require("semver");
+/**
+ * Angular nx preset for Cypress Component Testing
+ *
+ * This preset contains the base configuration
+ * for your component tests that nx recommends.
+ * including a devServer that supports nx workspaces.
+ * you can easily extend this within your cypress config via spreading the preset
+ * @example
+ * export default defineConfig({
+ *   component: {
+ *     ...nxComponentTestingPreset(__filename)
+ *     // add your own config here
+ *   }
+ * })
+ *
+ * @param pathToConfig will be used for loading project options and to construct the output paths for videos and screenshots
+ * @param options override options
+ */
+function nxComponentTestingPreset(pathToConfig, options) {
+    if (global.NX_GRAPH_CREATION || global.NX_CYPRESS_INIT_GENERATOR_RUNNING) {
+        // this is only used by plugins, so we don't need the component testing
+        // options, cast to any to avoid type errors
+        return (0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig, {
+            testingType: 'component',
+        });
+    }
+    let graph;
+    try {
+        graph = (0, devkit_1.readCachedProjectGraph)();
+    }
+    catch (e) {
+        throw new Error(
+        // don't want to strip indents so error stack has correct indentation
+        `Unable to read the project graph for component testing.
+This is likely due to not running via nx. i.e. 'nx component-test my-project'.
+Please open an issue if this error persists.
+${e.stack ? e.stack : e}`);
+    }
+    const ctProjectConfig = (0, ct_helpers_1.getProjectConfigByPath)(graph, pathToConfig);
+    const ctConfigurationName = process.env.NX_CYPRESS_TARGET_CONFIGURATION;
+    const ctContext = (0, ct_helpers_1.createExecutorContext)(graph, ctProjectConfig.targets, ctProjectConfig.name, options?.ctTargetName || 'component-test', ctConfigurationName);
+    const buildTarget = options?.buildTarget
+        ? (0, devkit_1.parseTargetString)(options.buildTarget, graph)
+        : // for backwards compat, if no buildTargetin the preset options, get it from the target options
+            getBuildableTarget(ctContext);
+    if (!buildTarget.project && !graph.nodes?.[buildTarget.project]?.data) {
+        throw new Error((0, devkit_1.stripIndents) `Unable to find project configuration for build target.
+    Project Name? ${buildTarget.project}
+    Has project config? ${!!graph.nodes?.[buildTarget.project]?.data}`);
+    }
+    const fromWorkspaceRoot = (0, path_1.relative)(ctContext.root, pathToConfig);
+    const normalizedFromWorkspaceRootPath = (0, fs_1.lstatSync)(pathToConfig).isFile()
+        ? (0, path_1.dirname)(fromWorkspaceRoot)
+        : fromWorkspaceRoot;
+    const offset = isOffsetNeeded(ctContext, ctProjectConfig)
+        ? (0, devkit_1.offsetFromRoot)(normalizedFromWorkspaceRootPath)
+        : undefined;
+    const buildContext = (0, ct_helpers_1.createExecutorContext)(graph, graph.nodes[buildTarget.project]?.data.targets, buildTarget.project, buildTarget.target, buildTarget.configuration);
+    const buildableProjectConfig = normalizeBuildTargetOptions(buildContext, ctContext, offset);
+    return {
+        ...(0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig, { testingType: 'component' }),
+        // NOTE: cannot use a glob pattern since it will break cypress generated tsconfig.
+        specPattern: ['src/**/*.cy.ts', 'src/**/*.cy.js'],
+        // Cy v12.17.0+ does not work with aboslute paths for index file
+        // but does with relative pathing, since relative path is the default location, we can omit it
+        indexHtmlFile: requiresAbsolutePath()
+            ? (0, devkit_1.joinPathFragments)(ctContext.root, ctProjectConfig.root, 'cypress', 'support', 'component-index.html')
+            : undefined,
+        devServer: {
+            // cypress uses string union type,
+            // need to use const to prevent typing to string
+            ...{
+                framework: 'angular',
+                bundler: 'webpack',
+            },
+            options: {
+                projectConfig: buildableProjectConfig,
+            },
+        },
+    };
+}
+exports.nxComponentTestingPreset = nxComponentTestingPreset;
+function getBuildableTarget(ctContext) {
+    const targets = ctContext.projectGraph.nodes[ctContext.projectName]?.data?.targets;
+    const targetConfig = targets?.[ctContext.targetName];
+    if (!targetConfig) {
+        throw new Error((0, devkit_1.stripIndents) `Unable to find component testing target configuration in project '${ctContext.projectName}'.
+      Has targets? ${!!targets}
+      Has target name? ${ctContext.targetName}
+      Has ct project name? ${ctContext.projectName}
+      `);
+    }
+    const cypressCtOptions = (0, devkit_1.readTargetOptions)({
+        project: ctContext.projectName,
+        target: ctContext.targetName,
+        configuration: ctContext.configurationName,
+    }, ctContext);
+    if (!cypressCtOptions.devServerTarget) {
+        throw new Error(`Unable to find the 'devServerTarget' executor option in the '${ctContext.targetName}' target of the '${ctContext.projectName}' project`);
+    }
+    return (0, devkit_1.parseTargetString)(cypressCtOptions.devServerTarget, ctContext.projectGraph);
+}
+function normalizeBuildTargetOptions(buildContext, ctContext, offset) {
+    const options = (0, devkit_1.readTargetOptions)({
+        project: buildContext.projectName,
+        target: buildContext.targetName,
+        configuration: buildContext.configurationName,
+    }, buildContext);
+    const buildOptions = withSchemaDefaults(options);
+    // cypress creates a tsconfig if one isn't preset
+    // that contains all the support required for angular and component tests
+    delete buildOptions.tsConfig;
+    if (offset) {
+        // polyfill entries might be local files or files that are resolved from node_modules
+        // like zone.js.
+        // prevents error from webpack saying can't find <offset>/zone.js.
+        const handlePolyfillPath = (polyfill) => {
+            const maybeFullPath = (0, path_1.join)(ctContext.root, polyfill.split('/').join(path_1.sep));
+            if ((0, fs_1.existsSync)(maybeFullPath)) {
+                return (0, devkit_1.joinPathFragments)(offset, polyfill);
+            }
+            return polyfill;
+        };
+        // paths need to be unix paths for angular devkit
+        if (buildOptions.polyfills) {
+            buildOptions.polyfills =
+                Array.isArray(buildOptions.polyfills) &&
+                    buildOptions.polyfills.length > 0
+                    ? buildOptions.polyfills.map((p) => handlePolyfillPath(p))
+                    : handlePolyfillPath(buildOptions.polyfills);
+        }
+        buildOptions.main = (0, devkit_1.joinPathFragments)(offset, buildOptions.main);
+        buildOptions.index =
+            typeof buildOptions.index === 'string'
+                ? (0, devkit_1.joinPathFragments)(offset, buildOptions.index)
+                : {
+                    ...buildOptions.index,
+                    input: (0, devkit_1.joinPathFragments)(offset, buildOptions.index.input),
+                };
+        buildOptions.fileReplacements = buildOptions.fileReplacements.map((fr) => {
+            fr.replace = (0, devkit_1.joinPathFragments)(offset, fr.replace);
+            fr.with = (0, devkit_1.joinPathFragments)(offset, fr.with);
+            return fr;
+        });
+    }
+    // if the ct project isn't being used in the build project
+    // then we don't want to have the assets/scripts/styles be included to
+    // prevent inclusion of unintended stuff like tailwind
+    if (buildContext.projectName === ctContext.projectName ||
+        (0, ct_helpers_1.isCtProjectUsingBuildProject)(ctContext.projectGraph, buildContext.projectName, ctContext.projectName)) {
+        if (offset) {
+            buildOptions.assets = buildOptions.assets.map((asset) => {
+                return typeof asset === 'string'
+                    ? (0, devkit_1.joinPathFragments)(offset, asset)
+                    : { ...asset, input: (0, devkit_1.joinPathFragments)(offset, asset.input) };
+            });
+            buildOptions.styles = buildOptions.styles.map((style) => {
+                return typeof style === 'string'
+                    ? (0, devkit_1.joinPathFragments)(offset, style)
+                    : { ...style, input: (0, devkit_1.joinPathFragments)(offset, style.input) };
+            });
+            buildOptions.scripts = buildOptions.scripts.map((script) => {
+                return typeof script === 'string'
+                    ? (0, devkit_1.joinPathFragments)(offset, script)
+                    : { ...script, input: (0, devkit_1.joinPathFragments)(offset, script.input) };
+            });
+            if (buildOptions.stylePreprocessorOptions?.includePaths.length > 0) {
+                buildOptions.stylePreprocessorOptions = {
+                    includePaths: buildOptions.stylePreprocessorOptions.includePaths.map((path) => {
+                        return (0, devkit_1.joinPathFragments)(offset, path);
+                    }),
+                };
+            }
+        }
+    }
+    else {
+        const stylePath = getTempStylesForTailwind(ctContext);
+        buildOptions.styles = stylePath ? [stylePath] : [];
+        buildOptions.assets = [];
+        buildOptions.scripts = [];
+        buildOptions.stylePreprocessorOptions = { includePaths: [] };
+    }
+    const config = buildContext.projectGraph.nodes[buildContext.projectName]?.data;
+    if (!config.sourceRoot) {
+        devkit_1.logger.warn((0, devkit_1.stripIndents) `Unable to find the 'sourceRoot' in the project configuration.
+Will set 'sourceRoot' to '${config.root}/src'
+Note: this may fail, setting the correct 'sourceRoot' for ${buildContext.projectName} in the project.json file will ensure the correct value is used.`);
+        config.sourceRoot = (0, devkit_1.joinPathFragments)(config.root, 'src');
+    }
+    return {
+        root: offset ? (0, devkit_1.joinPathFragments)(offset, config.root) : config.root,
+        sourceRoot: offset
+            ? (0, devkit_1.joinPathFragments)(offset, config.sourceRoot)
+            : config.sourceRoot,
+        buildOptions: {
+            ...buildOptions,
+            // this property is only valid for cy v12.9.0+
+            workspaceRoot: offset ? undefined : ctContext.root,
+        },
+    };
+}
+function withSchemaDefaults(options) {
+    if (!options.main && !options.browser) {
+        throw new Error('Missing executor options "main" and "browser"');
+    }
+    if (!options.index) {
+        throw new Error('Missing executor options "index"');
+    }
+    if (!options.tsConfig) {
+        throw new Error('Missing executor options "tsConfig"');
+    }
+    // cypress defaults aot to false so we cannot use buildOptimizer
+    // otherwise the 'buildOptimizer' cannot be used without 'aot' error is thrown
+    options.buildOptimizer = false;
+    options.aot = false;
+    options.assets ??= [];
+    options.allowedCommonJsDependencies ??= [];
+    options.budgets ??= [];
+    options.commonChunk ??= true;
+    options.crossOrigin ??= 'none';
+    options.deleteOutputPath ??= true;
+    options.extractLicenses ??= true;
+    options.fileReplacements ??= [];
+    options.inlineStyleLanguage ??= 'css';
+    options.i18nDuplicateTranslation ??= 'warning';
+    options.outputHashing ??= 'none';
+    options.progress ??= true;
+    options.scripts ??= [];
+    options.main ??= options.browser;
+    return options;
+}
+/**
+ * @returns a path from the workspace root to a temp file containing the base tailwind setup
+ * if tailwind is being used in the project root or workspace root
+ * this file should get cleaned up via the cypress executor
+ */
+function getTempStylesForTailwind(ctExecutorContext) {
+    const ctProjectConfig = ctExecutorContext.projectGraph.nodes[ctExecutorContext.projectName]?.data;
+    // angular only supports `tailwind.config.{js,cjs}`
+    const ctProjectTailwindConfig = (0, path_1.join)(ctExecutorContext.root, ctProjectConfig.root, 'tailwind.config');
+    const exts = ['js', 'cjs'];
+    const isTailWindInCtProject = exts.some((ext) => (0, fs_1.existsSync)(`${ctProjectTailwindConfig}.${ext}`));
+    const rootTailwindPath = (0, path_1.join)(ctExecutorContext.root, 'tailwind.config');
+    const isTailWindInRoot = exts.some((ext) => (0, fs_1.existsSync)(`${rootTailwindPath}.${ext}`));
+    if (isTailWindInRoot || isTailWindInCtProject) {
+        const pathToStyle = (0, ct_helpers_1.getTempTailwindPath)(ctExecutorContext);
+        try {
+            (0, fs_1.mkdirSync)((0, path_1.dirname)(pathToStyle), { recursive: true });
+            (0, fs_1.writeFileSync)(pathToStyle, `
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`, { encoding: 'utf-8' });
+            return pathToStyle;
+        }
+        catch (makeTmpFileError) {
+            devkit_1.logger.warn((0, devkit_1.stripIndents) `Issue creating a temp file for tailwind styles. Defaulting to no tailwind setup.
+      Temp file path? ${pathToStyle}`);
+            devkit_1.logger.error(makeTmpFileError);
+        }
+    }
+}
+function isOffsetNeeded(ctExecutorContext, ctProjectConfig) {
+    try {
+        const supportsWorkspaceRoot = isCyVersionGreaterThanOrEqual('12.9.0');
+        // if using cypress <v12.9.0 then we require the offset
+        if (!supportsWorkspaceRoot) {
+            return true;
+        }
+        if (ctProjectConfig.projectType === 'library' &&
+            // angular will only see this config if the library root is the build project config root
+            // otherwise it will be set to the buildTarget root which is the app root where this config doesn't exist
+            // causing tailwind styles from the libs project root to not work
+            ['js', 'cjs'].some((ext) => (0, fs_1.existsSync)((0, path_1.join)(ctExecutorContext.root, ctProjectConfig.root, `tailwind.config.${ext}`)))) {
+            return true;
+        }
+        return false;
+    }
+    catch (e) {
+        if (process.env.NX_VERBOSE_LOGGING === 'true') {
+            devkit_1.logger.error(e);
+        }
+        // unable to determine if we don't require an offset
+        // safest to assume we do
+        return true;
+    }
+}
+/**
+ * check if the cypress version is able to understand absolute paths to the indexHtmlFile option
+ * this is required for nx to work with cypress <v12.17.0 since the relative pathing is causes issues
+ * with invalid pathing.
+ * v12.17.0+ works with relative pathing
+ *
+ * if there is an error thrown then we assume it is an older version of cypress and use the absolute path
+ * as that was supported for longer.
+ *
+ * */
+function requiresAbsolutePath() {
+    try {
+        return !isCyVersionGreaterThanOrEqual('12.17.0');
+    }
+    catch (e) {
+        if (process.env.NX_VERBOSE_LOGGING === 'true') {
+            devkit_1.logger.error(e);
+        }
+        return true;
+    }
+}
+/**
+ * Checks if the install cypress version is greater than or equal to the provided version.
+ * Does not catch errors as any custom logic for error handling is required on consumer side.
+ * */
+function isCyVersionGreaterThanOrEqual(version) {
+    const { version: cyVersion = null } = require('cypress/package.json');
+    return !!cyVersion && (0, semver_1.gte)(cyVersion, version);
+}

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

@@ -0,0 +1,4 @@
+import type { Schema } from './schema';
+export declare function executeDevServerBuilder(rawOptions: Schema, context: import('@angular-devkit/architect').BuilderContext): import("rxjs").Observable<import("@angular-devkit/build-angular").DevServerBuilderOutput>;
+declare const _default: any;
+export default _default;

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

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.executeDevServerBuilder = void 0;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const webpack_nx_build_coordination_plugin_1 = require("@nx/webpack/src/plugins/webpack-nx-build-coordination-plugin");
+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 angular_version_utils_1 = require("../../executors/utilities/angular-version-utils");
+const esbuild_extensions_1 = require("../../executors/utilities/esbuild-extensions");
+const patch_builder_context_1 = require("../../executors/utilities/patch-builder-context");
+const buildable_libs_1 = require("../utilities/buildable-libs");
+const webpack_1 = require("../utilities/webpack");
+const lib_1 = require("./lib");
+function executeDevServerBuilder(rawOptions, context) {
+    (0, lib_1.validateOptions)(rawOptions);
+    process.env.NX_TSCONFIG_PATH = (0, js_1.getRootTsConfigPath)();
+    const options = (0, lib_1.normalizeOptions)(rawOptions);
+    const parsedBuildTarget = (0, devkit_1.parseTargetString)(options.buildTarget, {
+        cwd: context.currentDirectory,
+        projectGraph: (0, devkit_1.readCachedProjectGraph)(),
+        projectName: context.target.project,
+        root: context.workspaceRoot,
+        isVerbose: false,
+    });
+    const browserTargetProjectConfiguration = (0, project_graph_1.readCachedProjectConfiguration)(parsedBuildTarget.project);
+    const buildTarget = browserTargetProjectConfiguration.targets[parsedBuildTarget.target];
+    const buildTargetOptions = {
+        ...buildTarget.options,
+        ...(parsedBuildTarget.configuration
+            ? buildTarget.configurations[parsedBuildTarget.configuration]
+            : buildTarget.defaultConfiguration
+                ? buildTarget.configurations[buildTarget.defaultConfiguration]
+                : {}),
+    };
+    const buildLibsFromSource = options.buildLibsFromSource ??
+        buildTargetOptions.buildLibsFromSource ??
+        true;
+    process.env.NX_BUILD_LIBS_FROM_SOURCE = `${buildLibsFromSource}`;
+    process.env.NX_BUILD_TARGET = options.buildTarget;
+    let pathToWebpackConfig;
+    if (buildTargetOptions.customWebpackConfig?.path) {
+        pathToWebpackConfig = (0, devkit_1.joinPathFragments)(context.workspaceRoot, buildTargetOptions.customWebpackConfig.path);
+        if (pathToWebpackConfig && !(0, fs_1.existsSync)(pathToWebpackConfig)) {
+            throw new Error(`Custom Webpack Config File Not Found!\nTo use a custom webpack config, please ensure the path to the custom webpack file is correct: \n${pathToWebpackConfig}`);
+        }
+    }
+    const normalizedIndexHtmlTransformer = buildTargetOptions.indexHtmlTransformer ??
+        buildTargetOptions.indexFileTransformer;
+    let pathToIndexFileTransformer;
+    if (normalizedIndexHtmlTransformer) {
+        pathToIndexFileTransformer = (0, devkit_1.joinPathFragments)(context.workspaceRoot, normalizedIndexHtmlTransformer);
+        if (pathToIndexFileTransformer && !(0, fs_1.existsSync)(pathToIndexFileTransformer)) {
+            throw new Error(`File containing Index File Transformer function Not Found!\n Please ensure the path to the file containing the function is correct: \n${pathToIndexFileTransformer}`);
+        }
+    }
+    let dependencies;
+    if (!buildLibsFromSource) {
+        const { tsConfigPath, dependencies: foundDependencies } = (0, buildable_libs_1.createTmpTsConfigForBuildableLibs)(buildTargetOptions.tsConfig, 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
+        // configuration. Therefore, we patch the method in the context to retrieve
+        // the target options to overwrite the tsconfig path to use the generated
+        // one with the updated path mappings.
+        const originalGetTargetOptions = context.getTargetOptions;
+        context.getTargetOptions = async (target) => {
+            const options = await originalGetTargetOptions(target);
+            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 = relativeTsConfigPath;
+    }
+    const delegateBuilderOptions = getDelegateBuilderOptions(options);
+    const isUsingWebpackBuilder = ![
+        '@angular-devkit/build-angular:application',
+        '@angular-devkit/build-angular:browser-esbuild',
+        '@nx/angular:application',
+        '@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.
+     */
+    (0, patch_builder_context_1.patchBuilderContext)(context, !isUsingWebpackBuilder, parsedBuildTarget);
+    return (0, rxjs_1.combineLatest)([
+        (0, rxjs_1.from)(Promise.resolve().then(() => require('@angular-devkit/build-angular'))),
+        (0, rxjs_1.from)((0, esbuild_extensions_1.loadPlugins)(buildTargetOptions.plugins, buildTargetOptions.tsConfig)),
+        (0, rxjs_1.from)((0, esbuild_extensions_1.loadMiddleware)(options.esbuildMiddleware, buildTargetOptions.tsConfig)),
+        (0, rxjs_1.from)(loadIndexHtmlFileTransformer(pathToIndexFileTransformer, buildTargetOptions.tsConfig, context, isUsingWebpackBuilder)),
+    ]).pipe((0, operators_2.switchMap)(([{ executeDevServerBuilder }, plugins, middleware, indexHtmlTransformer,]) => executeDevServerBuilder(delegateBuilderOptions, context, {
+        webpackConfiguration: isUsingWebpackBuilder
+            ? async (baseWebpackConfig) => {
+                if (!buildLibsFromSource) {
+                    const workspaceDependencies = dependencies
+                        .filter((dep) => !(0, operators_1.isNpmProject)(dep.node))
+                        .map((dep) => dep.node.name);
+                    // default for `nx run-many` is --all projects
+                    // by passing an empty string for --projects, run-many will default to
+                    // run the target for all projects.
+                    // This will occur when workspaceDependencies = []
+                    if (workspaceDependencies.length > 0) {
+                        baseWebpackConfig.plugins.push(
+                        // @ts-expect-error - difference between angular and webpack plugin definitions bc of webpack versions
+                        new webpack_nx_build_coordination_plugin_1.WebpackNxBuildCoordinationPlugin(`nx run-many --target=${parsedBuildTarget.target} --projects=${workspaceDependencies.join(',')}`));
+                    }
+                }
+                if (!pathToWebpackConfig) {
+                    return baseWebpackConfig;
+                }
+                return (0, webpack_1.mergeCustomWebpackConfig)(baseWebpackConfig, pathToWebpackConfig, buildTargetOptions, context.target);
+            }
+            : undefined,
+        ...(indexHtmlTransformer
+            ? {
+                indexHtml: indexHtmlTransformer,
+            }
+            : {}),
+    }, {
+        buildPlugins: plugins,
+        middleware,
+    })));
+}
+exports.executeDevServerBuilder = executeDevServerBuilder;
+exports.default = require('@angular-devkit/architect').createBuilder(executeDevServerBuilder);
+function getDelegateBuilderOptions(options) {
+    const delegateBuilderOptions = {
+        ...options,
+    };
+    const { major: angularMajorVersion } = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
+    if (angularMajorVersion <= 17) {
+        delegateBuilderOptions.browserTarget = delegateBuilderOptions.buildTarget;
+        delete delegateBuilderOptions.buildTarget;
+    }
+    // delete extra option not supported by the delegate builder
+    delete delegateBuilderOptions.buildLibsFromSource;
+    return delegateBuilderOptions;
+}
+async function loadIndexHtmlFileTransformer(pathToIndexFileTransformer, tsConfig, context, isUsingWebpackBuilder) {
+    if (!pathToIndexFileTransformer) {
+        return undefined;
+    }
+    return isUsingWebpackBuilder
+        ? (0, webpack_1.resolveIndexHtmlTransformer)(pathToIndexFileTransformer, tsConfig, context.target)
+        : await (0, esbuild_extensions_1.loadIndexHtmlTransformer)(pathToIndexFileTransformer, tsConfig);
+}

package/src/builders/dev-server/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './normalize-options';
+export * from './validate-options';