feat(angular): support esbuild-based executors/builders in @nx/angula…

…r:dev-server (nrwl#20311)

docs/generated/manifests/menus.json

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

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

@@ -1,13 +1,13 @@
 {
-  "name": "webpack-dev-server",
-  "implementation": "/packages/angular/src/builders/webpack-dev-server/webpack-dev-server.impl.ts",
+  "name": "dev-server",
+  "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.",
-    "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",
+    "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: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": {
-      "implementation": "@nx/angular/src/builders/webpack-dev-server/webpack-dev-server.impl",
-      "schema": "@nx/angular/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": "@nx/angular/src/builders/dev-server/dev-server.impl",
+      "schema": "@nx/angular/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": "@nx/angular/src/builders/webpack-server/webpack-server.impl",

packages/angular/docs/webpack-dev-server-examples.md → 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": {
-      "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",

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": {