@nx/angular 17.2.0-beta.4 → 17.2.0-beta.6

package/executors.d.ts

@@ -1,9 +1,14 @@
 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-dev-server/webpack-dev-server.impl';
 export * from './src/builders/webpack-server/webpack-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';
 export * from './src/executors/browser-esbuild/browser-esbuild.impl';
+import { executeDevServerBuilder } from './src/builders/dev-server/dev-server.impl';
+export { 
+/**
+ * @deprecated Use executeDevServerBuilder instead. It will be removed in Nx v18.
+ */
+executeDevServerBuilder as executeWebpackDevServerBuilder, executeDevServerBuilder, };

package/executors.js

@@ -1,12 +1,15 @@
 "use strict";
 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-dev-server/webpack-dev-server.impl"), exports);
 tslib_1.__exportStar(require("./src/builders/webpack-server/webpack-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);
 tslib_1.__exportStar(require("./src/executors/browser-esbuild/browser-esbuild.impl"), exports);
+const dev_server_impl_1 = require("./src/builders/dev-server/dev-server.impl");
+Object.defineProperty(exports, "executeWebpackDevServerBuilder", { enumerable: true, get: function () { return dev_server_impl_1.executeDevServerBuilder; } });
+Object.defineProperty(exports, "executeDevServerBuilder", { enumerable: true, get: function () { return dev_server_impl_1.executeDevServerBuilder; } });

package/executors.json

@@ -27,10 +27,10 @@
       "schema": "./src/builders/webpack-browser/schema.json",
       "description": "The `webpack-browser` executor is very similar to the standard `browser` builder provided by the Angular Devkit. It allows you to build your Angular application to a build artifact that can be hosted online. There are some key differences:   \n- Supports Custom Webpack Configurations  \n- Supports Incremental Building"
     },
-    "webpack-dev-server": {
-      "implementation": "./src/builders/webpack-dev-server/webpack-dev-server.impl",
-      "schema": "./src/builders/webpack-dev-server/schema.json",
-      "description": "The `webpack-dev-server` executor is very similar to the standard `dev-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."
+    "dev-server": {
+      "implementation": "./src/builders/dev-server/dev-server.impl",
+      "schema": "./src/builders/dev-server/schema.json",
+      "description": "The `dev-server` executor is very similar to the standard `dev-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."
     },
     "webpack-server": {
       "implementation": "./src/builders/webpack-server/webpack-server.impl",

package/migrations.json

@@ -323,6 +323,12 @@
       },
       "description": "Replace the deep imports from 'zone.js/dist/zone' and 'zone.js/dist/zone-testing' with 'zone.js' and 'zone.js/testing'.",
       "factory": "./src/migrations/update-17-1-0/update-zone-js-deep-import"
+    },
+    "rename-webpack-dev-server-executor": {
+      "cli": "nx",
+      "version": "17.2.0-beta.2",
+      "description": "Rename '@nx/angular:webpack-dev-server' executor to '@nx/angular:dev-server'",
+      "factory": "./src/migrations/update-17-2-0/rename-webpack-dev-server"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "17.2.0-beta.4",
+  "version": "17.2.0-beta.6",
   "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.4",
-    "@nx/cypress": "17.2.0-beta.4",
-    "@nx/jest": "17.2.0-beta.4",
-    "@nx/js": "17.2.0-beta.4",
-    "@nx/eslint": "17.2.0-beta.4",
-    "@nx/webpack": "17.2.0-beta.4",
-    "@nx/web": "17.2.0-beta.4",
-    "@nx/workspace": "17.2.0-beta.4",
-    "@nrwl/angular": "17.2.0-beta.4"
+    "@nx/devkit": "17.2.0-beta.6",
+    "@nx/cypress": "17.2.0-beta.6",
+    "@nx/jest": "17.2.0-beta.6",
+    "@nx/js": "17.2.0-beta.6",
+    "@nx/eslint": "17.2.0-beta.6",
+    "@nx/webpack": "17.2.0-beta.6",
+    "@nx/web": "17.2.0-beta.6",
+    "@nx/workspace": "17.2.0-beta.6",
+    "@nrwl/angular": "17.2.0-beta.6"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",

package/plugins/component-testing.js

@@ -225,7 +225,7 @@ function withSchemaDefaults(options) {
     options.outputHashing ??= 'none';
     options.progress ??= true;
     options.scripts ??= [];
-    options.main = options.main ??= options.browser;
+    options.main ??= options.browser;
     return options;
 }
 /**

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/{webpack-dev-server/webpack-dev-server.impl.js → dev-server/dev-server.impl.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.executeWebpackDevServerBuilder = void 0;
+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");
@@ -9,11 +9,12 @@ const operators_1 = require("nx/src/project-graph/operators");
 const project_graph_1 = require("nx/src/project-graph/project-graph");
 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");
 const lib_1 = require("./lib");
-function executeWebpackDevServerBuilder(rawOptions, context) {
+function executeDevServerBuilder(rawOptions, context) {
     process.env.NX_TSCONFIG_PATH = (0, js_1.getRootTsConfigPath)();
     const options = (0, lib_1.normalizeOptions)(rawOptions);
     const parsedBuildTarget = (0, devkit_1.parseTargetString)(options.buildTarget, {
@@ -74,28 +75,35 @@ function executeWebpackDevServerBuilder(rawOptions, context) {
         // webpack-server implementation.
         buildTargetOptions.tsConfig = tsConfigPath;
     }
-    const delegateBuilderOptions = getDelegateBuilderOptions(options);
+    const delegateBuilderOptions = getDelegateBuilderOptions(options, buildTarget, context);
+    const isUsingWebpackBuilder = ![
+        '@angular-devkit/build-angular:application',
+        '@angular-devkit/build-angular:browser-esbuild',
+        '@nx/angular:browser-esbuild',
+    ].includes(buildTarget.executor);
     return (0, rxjs_1.from)(Promise.resolve().then(() => require('@angular-devkit/build-angular'))).pipe((0, operators_2.switchMap)(({ executeDevServerBuilder }) => executeDevServerBuilder(delegateBuilderOptions, context, {
-        webpackConfiguration: 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(',')}`));
+        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);
             }
-            if (!pathToWebpackConfig) {
-                return baseWebpackConfig;
-            }
-            return (0, webpack_1.mergeCustomWebpackConfig)(baseWebpackConfig, pathToWebpackConfig, buildTargetOptions, context.target);
-        },
+            : undefined,
         ...(pathToIndexFileTransformer
             ? {
                 indexHtml: (0, webpack_1.resolveIndexHtmlTransformer)(pathToIndexFileTransformer, buildTargetOptions.tsConfig, context.target),
@@ -103,12 +111,26 @@ function executeWebpackDevServerBuilder(rawOptions, context) {
             : {}),
     })));
 }
-exports.executeWebpackDevServerBuilder = executeWebpackDevServerBuilder;
-exports.default = require('@angular-devkit/architect').createBuilder(executeWebpackDevServerBuilder);
-function getDelegateBuilderOptions(options) {
+exports.executeDevServerBuilder = executeDevServerBuilder;
+exports.default = require('@angular-devkit/architect').createBuilder(executeDevServerBuilder);
+function getDelegateBuilderOptions(options, buildTarget, context) {
     const delegatedBuilderOptions = { ...options };
-    const { major } = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
-    if (major <= 17) {
+    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);
+        };
+    }
+    if (angularMajorVersion <= 17) {
         delegatedBuilderOptions.browserTarget = delegatedBuilderOptions.buildTarget;
         delete delegatedBuilderOptions.buildTarget;
     }

package/src/builders/{webpack-dev-server → dev-server}/schema.json

@@ -3,8 +3,8 @@
   "outputCapture": "direct-nodejs",
   "$schema": "http://json-schema.org/draft-07/schema",
   "title": "Schema for Webpack Dev Server",
-  "description": "The webpack-dev-server executor is very similar to the standard dev server builder provided by the Angular Devkit. It is usually used in tandem with `@nx/angular:webpack-browser` when your Angular application uses a custom webpack configuration.",
-  "examplesFile": "../../../docs/webpack-dev-server-examples.md",
+  "description": "The dev-server executor is very similar to the standard dev server builder provided by the Angular Devkit. It is usually used in tandem with `@nx/angular:webpack-browser` when your Angular application uses a custom webpack configuration.",
+  "examplesFile": "../../../docs/dev-server-examples.md",
   "type": "object",
   "presets": [
     {

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

@@ -1,5 +1,5 @@
 import type { Schema } from './schema';
-import { executeWebpackDevServerBuilder } from '../webpack-dev-server/webpack-dev-server.impl';
-export declare function executeModuleFederationDevServerBuilder(schema: Schema, context: import('@angular-devkit/architect').BuilderContext): ReturnType<typeof executeWebpackDevServerBuilder | any>;
+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

@@ -3,7 +3,7 @@ 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 webpack_dev_server_impl_1 = require("../webpack-dev-server/webpack-dev-server.impl");
+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");
@@ -170,7 +170,7 @@ function executeModuleFederationDevServerBuilder(schema, context) {
         projectsConfigurations: { projects: workspaceProjects, version: 2 },
         nxJsonConfiguration: (0, devkit_1.readNxJson)(),
     })));
-    const webpackDevServer = (0, webpack_dev_server_impl_1.executeWebpackDevServerBuilder)(options, context);
+    const webpackDevServer = (0, dev_server_impl_1.executeDevServerBuilder)(options, context);
     const currExecutor = options.static ? staticFileServer : webpackDevServer;
     if (options.isInitialHost === false) {
         return currExecutor;

package/src/builders/webpack-server/schema.json

@@ -3,7 +3,7 @@
   "outputCapture": "direct-nodejs",
   "$schema": "http://json-schema.org/draft-07/schema",
   "title": "Schema for Webpack Server",
-  "description": "The webpack-dev-server executor is very similar to the standard server builder provided by the Angular Devkit. It is usually used in tandem with `@nx/angular:webpack-browser` when your Angular application uses a custom webpack configuration and NgUniversal for SSR.",
+  "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 `@nx/angular:webpack-browser` when your Angular application uses a custom webpack configuration and NgUniversal for SSR.",
   "type": "object",
   "properties": {
     "assets": {

package/src/generators/application/lib/add-e2e.js

@@ -24,6 +24,7 @@ async function addE2e(tree, options) {
             skipPackageJson: options.skipPackageJson,
             skipFormat: true,
             devServerTarget: `${options.name}:serve:development`,
+            baseUrl: 'http://localhost:4200',
             rootProject: options.rootProject,
         });
     }

package/src/generators/ng-add/migrators/projects/e2e.migrator.js

@@ -242,6 +242,7 @@ class E2eMigrator extends project_migrator_1.ProjectMigrator {
             skipFormat: true,
             // any target would do, we replace it later with the target existing in the project being migrated
             devServerTarget: `${this.appName}:serve`,
+            baseUrl: 'http://localhost:4200',
         });
         const cypressConfigFilePath = this.updateOrCreateCypressConfigFile(oldCypressConfigFilePath);
         this.updateCypressProjectConfiguration(cypressConfigFilePath);

package/src/generators/setup-mf/lib/setup-serve-target.js

@@ -8,7 +8,7 @@ function setupServeTarget(host, options) {
         ...appConfig.targets['serve'],
         executor: options.mfType === 'host'
             ? '@nx/angular:module-federation-dev-server'
-            : '@nx/angular:webpack-dev-server',
+            : '@nx/angular:dev-server',
         options: {
             ...appConfig.targets['serve'].options,
             port: options.port ?? undefined,

package/src/migrations/update-17-2-0/rename-webpack-dev-server.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export default function (tree: Tree): Promise<void>;

package/src/migrations/update-17-2-0/rename-webpack-dev-server.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+async function default_1(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    for (const [, project] of projects) {
+        if (project.projectType !== 'application') {
+            continue;
+        }
+        for (const target of Object.values(project.targets ?? {})) {
+            if (target.executor === '@nx/angular:webpack-dev-server' ||
+                target.executor === '@nrwl/angular:webpack-dev-server') {
+                target.executor = '@nx/angular:dev-server';
+            }
+        }
+        (0, devkit_1.updateProjectConfiguration)(tree, project.name, project);
+    }
+    // update options from nx.json target defaults
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    if (!nxJson.targetDefaults) {
+        return;
+    }
+    for (const [targetOrExecutor, targetConfig] of Object.entries(nxJson.targetDefaults)) {
+        if (targetOrExecutor === '@nx/angular:webpack-dev-server') {
+            nxJson.targetDefaults['@nx/angular:dev-server'] = targetConfig;
+            delete nxJson.targetDefaults['@nx/angular:webpack-dev-server'];
+        }
+        else if (targetOrExecutor === '@nrwl/angular:webpack-dev-server') {
+            nxJson.targetDefaults['@nx/angular:dev-server'] = targetConfig;
+            delete nxJson.targetDefaults['@nrwl/angular:webpack-dev-server'];
+        }
+        else if (targetConfig.executor === '@nx/angular:webpack-dev-server' ||
+            targetConfig.executor === '@nrwl/angular:webpack-dev-server') {
+            targetConfig.executor = '@nx/angular:dev-server';
+        }
+    }
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = default_1;

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

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