feat(angular): support esbuild-based executors/builders in @nx/angular:dev-server (#20311)

docs/generated/manifests/menus.json

@@ -6553,9 +6553,9 @@
                 "disableCollapsible": false
               },
               {
-                "id": "webpack-dev-server",
+                "id": "dev-server",
-                "path": "/nx-api/angular/executors/webpack-dev-server",
+                "path": "/nx-api/angular/executors/dev-server",
-                "name": "webpack-dev-server",
+                "name": "dev-server",
                 "children": [],
                 "isExternal": false,
                 "disableCollapsible": false

docs/generated/manifests/nx-api.json

@@ -76,13 +76,13 @@
         "path": "/nx-api/angular/executors/webpack-browser",
         "type": "executor"
       },
-      "/nx-api/angular/executors/webpack-dev-server": {
+      "/nx-api/angular/executors/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 `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration.",
+        "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.",
-        "file": "generated/packages/angular/executors/webpack-dev-server.json",
+        "file": "generated/packages/angular/executors/dev-server.json",
         "hidden": false,
-        "name": "webpack-dev-server",
+        "name": "dev-server",
-        "originalFilePath": "/packages/angular/src/builders/webpack-dev-server/schema.json",
+        "originalFilePath": "/packages/angular/src/builders/dev-server/schema.json",
-        "path": "/nx-api/angular/executors/webpack-dev-server",
+        "path": "/nx-api/angular/executors/dev-server",
         "type": "executor"
       },
       "/nx-api/angular/executors/webpack-server": {

docs/generated/packages-metadata.json

@@ -72,12 +72,12 @@
         "type": "executor"
       },
       {
-        "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.",
+        "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.",
-        "file": "generated/packages/angular/executors/webpack-dev-server.json",
+        "file": "generated/packages/angular/executors/dev-server.json",
         "hidden": false,
-        "name": "webpack-dev-server",
+        "name": "dev-server",
-        "originalFilePath": "/packages/angular/src/builders/webpack-dev-server/schema.json",
+        "originalFilePath": "/packages/angular/src/builders/dev-server/schema.json",
-        "path": "angular/executors/webpack-dev-server",
+        "path": "angular/executors/dev-server",
         "type": "executor"
       },
       {

docs/generated/packages/angular/executors/dev-server.json

@@ -1,13 +1,13 @@
 {
-  "name": "webpack-dev-server",
+  "name": "dev-server",
-  "implementation": "/packages/angular/src/builders/webpack-dev-server/webpack-dev-server.impl.ts",
+  "implementation": "/packages/angular/src/builders/dev-server/dev-server.impl.ts",
   "schema": {
     "version": 2,
     "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.",
+    "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": "##### Seving an application with a custom webpack configuration\n\nThis executor should be used along with `@nx/angular:webpack-browser` to serve an application using a custom webpack configuration.\n\nYour `project.json` file should contain a `build` and `serve` target that matches the following:\n\n```json\n\"build\": {\n    \"executor\": \"@nx/angular:webpack-browser\",\n    \"options\": {\n        ...\n        \"customWebpackConfig\": {\n          \"path\": \"apps/appName/webpack.config.js\"\n        }\n    }\n},\n\"serve\": {\n    \"executor\": \"@nx/angular:webpack-dev-server\",\n    \"configurations\": {\n        \"production\": {\n            \"buildTarget\": \"appName:build:production\"\n        },\n        \"development\": {\n            \"buildTarget\": \"appName:build:development\"\n        }\n    },\n    \"defaultConfiguration\": \"development\",\n}\n```\n",
+    "examplesFile": "##### Seving an application with a custom webpack configuration\n\nThis executor should be used along with `@nx/angular:webpack-browser` to serve an application using a custom webpack configuration.\n\nYour `project.json` file should contain a `build` and `serve` target that matches the following:\n\n```json\n\"build\": {\n    \"executor\": \"@nx/angular:webpack-browser\",\n    \"options\": {\n        ...\n        \"customWebpackConfig\": {\n          \"path\": \"apps/appName/webpack.config.js\"\n        }\n    }\n},\n\"serve\": {\n    \"executor\": \"@nx/angular:dev-server\",\n    \"configurations\": {\n        \"production\": {\n            \"buildTarget\": \"appName:build:production\"\n        },\n        \"development\": {\n            \"buildTarget\": \"appName:build:development\"\n        }\n    },\n    \"defaultConfiguration\": \"development\",\n}\n```\n",
     "type": "object",
     "presets": [
       { "name": "Using a Different Port", "keys": ["buildTarget", "port"] }
@@ -117,9 +117,9 @@
       { "required": ["browserTarget"] }
     ]
   },
-  "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.",
+  "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.",
   "aliases": [],
   "hidden": false,
-  "path": "/packages/angular/src/builders/webpack-dev-server/schema.json",
+  "path": "/packages/angular/src/builders/dev-server/schema.json",
   "type": "executor"
 }

docs/generated/packages/angular/executors/webpack-server.json

@@ -6,7 +6,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": {

docs/packages.json

@@ -10,7 +10,7 @@
         "ng-packagr-lite",
         "package",
         "webpack-browser",
-        "webpack-dev-server",
+        "dev-server",
         "webpack-server",
         "module-federation-dev-server",
         "module-federation-dev-ssr"

docs/shared/reference/sitemap.md

@@ -324,7 +324,7 @@
       - [package](/nx-api/angular/executors/package)
       - [browser-esbuild](/nx-api/angular/executors/browser-esbuild)
       - [webpack-browser](/nx-api/angular/executors/webpack-browser)
-      - [webpack-dev-server](/nx-api/angular/executors/webpack-dev-server)
+      - [dev-server](/nx-api/angular/executors/dev-server)
       - [webpack-server](/nx-api/angular/executors/webpack-server)
       - [module-federation-dev-server](/nx-api/angular/executors/module-federation-dev-server)
       - [module-federation-dev-ssr](/nx-api/angular/executors/module-federation-dev-ssr)

nx-dev/nx-dev/redirect-rules.js

@@ -58,9 +58,12 @@ const schemaUrls = {
   '/angular/ng-packagr-lite': '/packages/angular/executors/ng-packagr-lite',
   '/angular/package': '/packages/angular/executors/package',
   '/angular/webpack-browser': '/packages/angular/executors/webpack-browser',
-  '/angular/webpack-server': '/packages/angular/executors/webpack-dev-server',
+  '/angular/webpack-server': '/packages/angular/executors/dev-server',
   '/packages/angular/executors/webpack-server':
-    '/packages/angular/executors/webpack-dev-server',
+    '/packages/angular/executors/dev-server',
+  '/angular/webpack-dev-server': '/packages/angular/executors/dev-server',
+  '/packages/angular/executors/webpack-dev-server':
+    '/packages/angular/executors/dev-server',
   '/react/application': '/packages/react/generators/application',
   '/react/component': '/packages/react/generators/component',
   '/react/component-cypress-spec':

packages-legacy/angular/executors.json

@@ -37,10 +37,10 @@
       "schema": "@nx/angular/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": {
+    "dev-server": {
-      "implementation": "@nx/angular/src/builders/webpack-dev-server/webpack-dev-server.impl",
+      "implementation": "@nx/angular/src/builders/dev-server/dev-server.impl",
-      "schema": "@nx/angular/src/builders/webpack-dev-server/schema.json",
+      "schema": "@nx/angular/src/builders/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."
+      "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": "@nx/angular/src/builders/webpack-server/webpack-server.impl",

packages/angular/docs/dev-server-examples.md

@@ -15,7 +15,7 @@ Your `project.json` file should contain a `build` and `serve` target that matche
     }
 },
 "serve": {
-    "executor": "@nx/angular:webpack-dev-server",
+    "executor": "@nx/angular:dev-server",
     "configurations": {
         "production": {
             "buildTarget": "appName:build:production"

packages/angular/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": {
+    "dev-server": {
-      "implementation": "./src/builders/webpack-dev-server/webpack-dev-server.impl",
+      "implementation": "./src/builders/dev-server/dev-server.impl",
-      "schema": "./src/builders/webpack-dev-server/schema.json",
+      "schema": "./src/builders/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."
+      "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",

packages/angular/executors.ts

@@ -1,9 +1,19 @@
 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 {
+  // TODO(v18): remove this alias
+  /**
+   * @deprecated Use executeDevServerBuilder instead. It will be removed in Nx v18.
+   */
+  executeDevServerBuilder as executeWebpackDevServerBuilder,
+  executeDevServerBuilder,
+};

packages/angular/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": {

packages/angular/src/builders/dev-server/dev-server.impl.ts

@@ -1,7 +1,10 @@
+import type { BuilderContext } from '@angular-devkit/architect';
+import type { DevServerBuilderOptions } from '@angular-devkit/build-angular';
 import {
   joinPathFragments,
   parseTargetString,
   readCachedProjectGraph,
+  type TargetConfiguration,
 } from '@nx/devkit';
 import { getRootTsConfigPath } from '@nx/js';
 import type { DependentBuildableProjectNode } from '@nx/js/src/utils/buildable-libs-utils';
@@ -11,6 +14,7 @@ import { isNpmProject } from 'nx/src/project-graph/operators';
 import { readCachedProjectConfiguration } from 'nx/src/project-graph/project-graph';
 import { from } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
+import { gte } from 'semver';
 import { getInstalledAngularVersionInfo } from '../../executors/utilities/angular-version-utils';
 import { createTmpTsConfigForBuildableLibs } from '../utilities/buildable-libs';
 import {
@@ -31,7 +35,7 @@ type BuildTargetOptions = {
   indexFileTransformer?: string;
 };
 
-export function executeWebpackDevServerBuilder(
+export function executeDevServerBuilder(
   rawOptions: Schema,
   context: import('@angular-devkit/architect').BuilderContext
 ) {
@@ -123,43 +127,54 @@ export function executeWebpackDevServerBuilder(
     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 from(import('@angular-devkit/build-angular')).pipe(
     switchMap(({ executeDevServerBuilder }) =>
       executeDevServerBuilder(delegateBuilderOptions, context, {
-        webpackConfiguration: async (baseWebpackConfig) => {
+        webpackConfiguration: isUsingWebpackBuilder
-          if (!buildLibsFromSource) {
+          ? async (baseWebpackConfig) => {
-            const workspaceDependencies = dependencies
+              if (!buildLibsFromSource) {
-              .filter((dep) => !isNpmProject(dep.node))
+                const workspaceDependencies = dependencies
-              .map((dep) => dep.node.name);
+                  .filter((dep) => !isNpmProject(dep.node))
-            // default for `nx run-many` is --all projects
+                  .map((dep) => dep.node.name);
-            // by passing an empty string for --projects, run-many will default to
+                // default for `nx run-many` is --all projects
-            // run the target for all projects.
+                // by passing an empty string for --projects, run-many will default to
-            // This will occur when workspaceDependencies = []
+                // run the target for all projects.
-            if (workspaceDependencies.length > 0) {
+                // This will occur when workspaceDependencies = []
-              baseWebpackConfig.plugins.push(
+                if (workspaceDependencies.length > 0) {
-                // @ts-expect-error - difference between angular and webpack plugin definitions bc of webpack versions
+                  baseWebpackConfig.plugins.push(
-                new WebpackNxBuildCoordinationPlugin(
+                    // @ts-expect-error - difference between angular and webpack plugin definitions bc of webpack versions
-                  `nx run-many --target=${
+                    new WebpackNxBuildCoordinationPlugin(
-                    parsedBuildTarget.target
+                      `nx run-many --target=${
-                  } --projects=${workspaceDependencies.join(',')}`
+                        parsedBuildTarget.target
-                )
+                      } --projects=${workspaceDependencies.join(',')}`
+                    )
+                  );
+                }
+              }
+
+              if (!pathToWebpackConfig) {
+                return baseWebpackConfig;
+              }
+
+              return mergeCustomWebpackConfig(
+                baseWebpackConfig,
+                pathToWebpackConfig,
+                buildTargetOptions,
+                context.target
               );
             }
-          }
+          : undefined,
-
-          if (!pathToWebpackConfig) {
-            return baseWebpackConfig;
-          }
-
-          return mergeCustomWebpackConfig(
-            baseWebpackConfig,
-            pathToWebpackConfig,
-            buildTargetOptions,
-            context.target
-          );
-        },
 
         ...(pathToIndexFileTransformer
           ? {
@@ -176,13 +191,42 @@ export function executeWebpackDevServerBuilder(
 }
 
 export default require('@angular-devkit/architect').createBuilder(
-  executeWebpackDevServerBuilder
+  executeDevServerBuilder
 ) as any;
 
-function getDelegateBuilderOptions(options: NormalizedSchema) {
+function getDelegateBuilderOptions(
-  const delegatedBuilderOptions = { ...options };
+  options: NormalizedSchema,
-  const { major } = getInstalledAngularVersionInfo();
+  buildTarget: TargetConfiguration,
-  if (major <= 17) {
+  context: BuilderContext
+) {
+  const delegatedBuilderOptions: DevServerBuilderOptions = { ...options };
+  const { major: angularMajorVersion, version: angularVersion } =
+    getInstalledAngularVersionInfo();
+
+  // this option was introduced in angular 16.1.0
+  // https://github.com/angular/angular-cli/commit/3ede1a2cac5005f4dfbd2a62ef528a34c3793b78
+  if (
+    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 as unknown as SchemaWithBrowserTarget
     ).browserTarget = delegatedBuilderOptions.buildTarget;

packages/angular/src/builders/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.",
+  "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/webpack-dev-server-examples.md",
+  "examplesFile": "../../../docs/dev-server-examples.md",
   "type": "object",
   "presets": [
     {

packages/angular/src/builders/module-federation-dev-server/module-federation-dev-server.impl.ts

@@ -13,7 +13,7 @@ import {
   workspaceRoot,
 } from '@nx/devkit';
 import { scheduleTarget } from 'nx/src/adapter/ngcli-adapter';
-import { executeWebpackDevServerBuilder } from '../webpack-dev-server/webpack-dev-server.impl';
+import { executeDevServerBuilder } from '../dev-server/dev-server.impl';
 import { readProjectsConfigurationFromProjectGraph } from 'nx/src/project-graph/project-graph';
 import { getExecutorInformation } from 'nx/src/command-line/run/executor-utils';
 import { validateDevRemotes } from '../utilities/module-federation';
@@ -241,7 +241,7 @@ function startDevRemotes(
 export function executeModuleFederationDevServerBuilder(
   schema: Schema,
   context: import('@angular-devkit/architect').BuilderContext
-): ReturnType<typeof executeWebpackDevServerBuilder | any> {
+): ReturnType<typeof executeDevServerBuilder | any> {
   // 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);
@@ -285,7 +285,7 @@ export function executeModuleFederationDevServerBuilder(
       )
     )
   );
-  const webpackDevServer = executeWebpackDevServerBuilder(options, context);
+  const webpackDevServer = executeDevServerBuilder(options, context);
 
   const currExecutor = options.static ? staticFileServer : webpackDevServer;
 

packages/angular/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": {

packages/angular/src/generators/setup-mf/lib/setup-serve-target.ts

@@ -13,7 +13,7 @@ export function setupServeTarget(host: Tree, options: Schema) {
     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,

packages/angular/src/generators/setup-mf/setup-mf.spec.ts

@@ -151,7 +151,7 @@ describe('Init MF', () => {
       expect(serve.executor).toEqual(
         type === 'host'
           ? '@nx/angular:module-federation-dev-server'
-          : '@nx/angular:webpack-dev-server'
+          : '@nx/angular:dev-server'
       );
       expect(build.executor).toEqual('@nx/angular:webpack-browser');
       expect(build.options.customWebpackConfig.path).toEqual(
@@ -180,7 +180,7 @@ describe('Init MF', () => {
       expect(serve.executor).toEqual(
         type === 'host'
           ? '@nx/angular:module-federation-dev-server'
-          : '@nx/angular:webpack-dev-server'
+          : '@nx/angular:dev-server'
       );
       expect(build.executor).toEqual('@nx/angular:webpack-browser');
       expect(build.options.customWebpackConfig.path).toEqual(

packages/angular/src/migrations/update-17-2-0/rename-webpack-dev-server.spec.ts

@@ -0,0 +1,128 @@
+import {
+  addProjectConfiguration,
+  readJson,
+  readProjectConfiguration,
+  updateJson,
+  type NxJsonConfiguration,
+  type Tree,
+} from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import migration from './rename-webpack-dev-server';
+
+describe('rename-webpack-dev-server migration', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+  });
+
+  it('should replace @nx/angular:webpack-dev-server with @nx/angular:dev-server', async () => {
+    addProjectConfiguration(tree, 'app1', {
+      root: 'apps/app1',
+      projectType: 'application',
+      targets: {
+        serve: {
+          executor: '@nx/angular:webpack-dev-server',
+          options: {},
+          configurations: {},
+        },
+      },
+    });
+
+    await migration(tree);
+
+    const project = readProjectConfiguration(tree, 'app1');
+    expect(project.targets.serve.executor).toBe('@nx/angular:dev-server');
+  });
+
+  it('should replace @nrwl/angular:webpack-dev-server with @nx/angular:dev-server', async () => {
+    addProjectConfiguration(tree, 'app1', {
+      root: 'apps/app1',
+      projectType: 'application',
+      targets: {
+        serve: {
+          executor: '@nrwl/angular:webpack-dev-server',
+          options: {},
+          configurations: {},
+        },
+      },
+    });
+
+    await migration(tree);
+
+    const project = readProjectConfiguration(tree, 'app1');
+    expect(project.targets.serve.executor).toBe('@nx/angular:dev-server');
+  });
+
+  it('should replace @nx/angular:webpack-dev-server with @nx/angular:dev-server from nx.json targetDefaults keys', async () => {
+    updateJson<NxJsonConfiguration>(tree, 'nx.json', (json) => {
+      json.targetDefaults ??= {};
+      json.targetDefaults['@nx/angular:webpack-dev-server'] = {
+        options: {},
+        configurations: {},
+      };
+      return json;
+    });
+
+    await migration(tree);
+
+    const nxJson = readJson<NxJsonConfiguration>(tree, 'nx.json');
+    expect(
+      nxJson.targetDefaults['@nx/angular:webpack-dev-server']
+    ).toBeUndefined();
+    expect(nxJson.targetDefaults['@nx/angular:dev-server']).toBeDefined();
+  });
+
+  it('should replace @nrwl/angular:webpack-dev-server with @nx/angular:dev-server from nx.json targetDefaults keys', async () => {
+    updateJson<NxJsonConfiguration>(tree, 'nx.json', (json) => {
+      json.targetDefaults ??= {};
+      json.targetDefaults['@nrwl/angular:webpack-dev-server'] = {
+        options: {},
+        configurations: {},
+      };
+      return json;
+    });
+
+    await migration(tree);
+
+    const nxJson = readJson<NxJsonConfiguration>(tree, 'nx.json');
+    expect(
+      nxJson.targetDefaults['@nrwl/angular:webpack-dev-server']
+    ).toBeUndefined();
+    expect(nxJson.targetDefaults['@nx/angular:dev-server']).toBeDefined();
+  });
+
+  it('should replace @nx/angular:webpack-dev-server with @nx/angular:dev-server from nx.json targetDefaults value executors', async () => {
+    updateJson<NxJsonConfiguration>(tree, 'nx.json', (json) => {
+      json.targetDefaults ??= {};
+      json.targetDefaults.serve = {
+        executor: '@nx/angular:webpack-dev-server',
+        options: {},
+        configurations: {},
+      };
+      return json;
+    });
+
+    await migration(tree);
+
+    const nxJson = readJson<NxJsonConfiguration>(tree, 'nx.json');
+    expect(nxJson.targetDefaults.serve.executor).toBe('@nx/angular:dev-server');
+  });
+
+  it('should replace @nrwl/angular:webpack-dev-server with @nx/angular:dev-server from nx.json targetDefaults value executors', async () => {
+    updateJson<NxJsonConfiguration>(tree, 'nx.json', (json) => {
+      json.targetDefaults ??= {};
+      json.targetDefaults.serve = {
+        executor: '@nrwl/angular:webpack-dev-server',
+        options: {},
+        configurations: {},
+      };
+      return json;
+    });
+
+    await migration(tree);
+
+    const nxJson = readJson<NxJsonConfiguration>(tree, 'nx.json');
+    expect(nxJson.targetDefaults.serve.executor).toBe('@nx/angular:dev-server');
+  });
+});

packages/angular/src/migrations/update-17-2-0/rename-webpack-dev-server.ts

@@ -0,0 +1,55 @@
+import {
+  formatFiles,
+  getProjects,
+  readNxJson,
+  updateNxJson,
+  updateProjectConfiguration,
+  type Tree,
+} from '@nx/devkit';
+
+export default async function (tree: Tree) {
+  const projects = 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';
+      }
+    }
+
+    updateProjectConfiguration(tree, project.name, project);
+  }
+
+  // update options from nx.json target defaults
+  const nxJson = 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';
+    }
+  }
+
+  updateNxJson(tree, nxJson);
+
+  await formatFiles(tree);
+}