feat(@angular-devkit/build-angular): allow forcing esbuild builder with dev-server

To allow lower overhead trial of the developer preview of the esbuild-based builder system,
the development server now has an option to force the usage of the esbuild-based
build system while still retaining the default Webpack-based build system for the
`build` command. The `forceEsbuild`/`--force-esbuild` option can be added to the
`angular.json` options for the `serve` target or used on the command line, respectively.
The `browser-esbuild` builder will be used to build the application using the options
specified by the server configuration's `browserTarget` option. Unsupported build options
will be ignored. If using a third-party builder, a warning will be issued but the build
will still be attempted. Third-party builder usage in this context is considered
unsupported and may result in unexpected behavior or build failures.

Author: clydin

goldens/public-api/angular_devkit/build_angular/index.md

@@ -110,6 +110,7 @@ export interface DevServerBuilderOptions {
     allowedHosts?: string[];
     browserTarget: string;
     disableHostCheck?: boolean;
+    forceEsbuild?: boolean;
     headers?: {
         [key: string]: string;
     };

packages/angular_devkit/build_angular/src/builders/dev-server/builder.ts

@@ -45,7 +45,10 @@ export function execute(
   return defer(() => initialize(options, projectName, context)).pipe(
     switchMap(({ builderName, normalizedOptions }) => {
       // Use vite-based development server for esbuild-based builds
-      if (builderName === '@angular-devkit/build-angular:browser-esbuild') {
+      if (
+        builderName === '@angular-devkit/build-angular:browser-esbuild' ||
+        normalizedOptions.forceEsbuild
+      ) {
         return defer(() => import('./vite-server')).pipe(
           switchMap(({ serveWithVite }) => serveWithVite(normalizedOptions, builderName, context)),
         );
@@ -95,6 +98,13 @@ case.
     );
   }
 
+  if (normalizedOptions.forceEsbuild && !builderName.startsWith('@angular-devkit/build-angular:')) {
+    context.logger.warn(
+      'Warning: Forcing the use of the esbuild-based build system with third-party builders' +
+        ' may cause unexpected behavior and/or build failures.',
+    );
+  }
+
   normalizedOptions.port = await checkPort(normalizedOptions.port, normalizedOptions.host);
 
   return { builderName, normalizedOptions };

packages/angular_devkit/build_angular/src/builders/dev-server/options.ts

@@ -55,6 +55,7 @@ export async function normalizeOptions(
     ssl,
     sslCert,
     sslKey,
+    forceEsbuild,
   } = options;
 
   // Return all the normalized options
@@ -80,5 +81,6 @@ export async function normalizeOptions(
     ssl,
     sslCert,
     sslKey,
+    forceEsbuild,
   };
 }

packages/angular_devkit/build_angular/src/builders/dev-server/schema.json

@@ -95,6 +95,11 @@
     "poll": {
       "type": "number",
       "description": "Enable and define the file watching poll time period in milliseconds."
+    },
+    "forceEsbuild": {
+      "type": "boolean",
+      "description": "Force the development server to use the 'browser-esbuild' builder when building. This is a developer preview option for the esbuild-based build system.",
+      "default": false
     }
   },
   "additionalProperties": false,