fix(@angular-devkit/build-angular): ensure browser-esbuild is used in dev server with browser builder and forceEsbuild

To ensure that the `forceEsbuild` development server option chooses the correct underlying build implementation when
the project contains the `browser` builder within the build target, an explicit check and conversion of the builder
name is now performed during the initialization phase of the development server builder.

Author: clydin

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

@@ -72,6 +72,14 @@ export function execute(
           );
         }
 
+        if (
+          normalizedOptions.forceEsbuild &&
+          builderName === '@angular-devkit/build-angular:browser'
+        ) {
+          // The compatibility builder should be used if esbuild is force enabled with the official Webpack-based builder.
+          builderName = '@angular-devkit/build-angular:browser-esbuild';
+        }
+
         return defer(() => import('./vite-server')).pipe(
           switchMap(({ serveWithVite }) =>
             serveWithVite(normalizedOptions, builderName, context, transforms, extensions),

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

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { executeDevServer } from '../../index';
+import { executeOnceAndFetch } from '../execute-fetch';
+import { describeServeBuilder } from '../jasmine-helpers';
+import { BASE_OPTIONS, DEV_SERVER_BUILDER_INFO } from '../setup';
+
+const ESBUILD_LOG_TEXT = 'Application bundle generation complete.';
+const WEBPACK_LOG_TEXT = 'Compiled successfully.';
+
+describeServeBuilder(
+  executeDevServer,
+  DEV_SERVER_BUILDER_INFO,
+  (harness, setupTarget, isViteRun) => {
+    describe('option: "forceEsbuild"', () => {
+      beforeEach(async () => {
+        setupTarget(harness, {});
+
+        // Application code is not needed for these tests
+        await harness.writeFile('src/main.ts', 'console.log("foo");');
+      });
+
+      it('should use build target specified build system when not present', async () => {
+        harness.useTarget('serve', {
+          ...BASE_OPTIONS,
+          forceEsbuild: undefined,
+        });
+
+        const { result, response, logs } = await executeOnceAndFetch(harness, '/main.js');
+
+        expect(result?.success).toBeTrue();
+        expect(await response?.text()).toContain('console.log');
+        expect(logs).toContain(
+          jasmine.objectContaining({
+            message: jasmine.stringMatching(isViteRun ? ESBUILD_LOG_TEXT : WEBPACK_LOG_TEXT),
+          }),
+        );
+      });
+
+      it('should use build target specified build system when false', async () => {
+        harness.useTarget('serve', {
+          ...BASE_OPTIONS,
+          forceEsbuild: false,
+        });
+
+        const { result, response, logs } = await executeOnceAndFetch(harness, '/main.js');
+
+        expect(result?.success).toBeTrue();
+        expect(await response?.text()).toContain('console.log');
+        expect(logs).toContain(
+          jasmine.objectContaining({
+            message: jasmine.stringMatching(isViteRun ? ESBUILD_LOG_TEXT : WEBPACK_LOG_TEXT),
+          }),
+        );
+      });
+
+      it('should always use the esbuild build system with Vite when true', async () => {
+        harness.useTarget('serve', {
+          ...BASE_OPTIONS,
+          forceEsbuild: true,
+        });
+
+        const { result, response, logs } = await executeOnceAndFetch(harness, '/main.js');
+
+        expect(result?.success).toBeTrue();
+        expect(await response?.text()).toContain('console.log');
+        expect(logs).toContain(
+          jasmine.objectContaining({ message: jasmine.stringMatching(ESBUILD_LOG_TEXT) }),
+        );
+      });
+    });
+  },
+);