The builder @angular-devkit/build-angular:browser-esbuild not starting server for custom config

[unitario]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When I serve my Angular application using the esbuild-based builder and a custom configuration that use a different index-file than the standard index.html, I get this logged in the console:

ng serve -c example
The esbuild-based browser application builder ('browser-esbuild') is currently in developer preview and is not yet recommended for production use. For additional information, please see https://angular.io/guide/esbuild
The 'namedChunks' option is not used by this builder and will be ignored.
The 'vendorChunk' option is not used by this builder and will be ignored.

Initial Chunk Files | Names         | Raw Size
main.js             | main          | 34.58 kB | 
polyfills.js        | polyfills     | 95 bytes | 
styles.css          | styles        | 95 bytes | 

                    | Initial Total | 34.76 kB

Application bundle generation complete. [2.300 seconds]
  ➜  Local:   http://127.0.0.1:4200/
Watch mode enabled. Watching for file changes...

However, when I try to access http://127.0.0.1:4200 in the browser I get this:

It's in Swedish but basically a standard 404.

This is the the content of my angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-esbuild-issue": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser-esbuild",
          "options": {
            "outputPath": "dist/angular-esbuild-issue",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "example": {
              "index": "src/example.html"
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angular-esbuild-issue:build:production"
            },
            "development": {
              "browserTarget": "angular-esbuild-issue:build:development"
            },
            "example": {
              "browserTarget": "angular-esbuild-issue:build:example,development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-esbuild-issue:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

Minimal Reproduction

1. Run ng new angular-esbuild-issue and then cd angular-esbuild-issue
2. Create file example.html in src directory.
3. Change builder to ESBuild as per documentation in architect.build.builder.

"architect": {
  "build": {
-    "builder": "@angular-devkit/build-angular:browser",
+    "builder": "@angular-devkit/build-angular:browser-esbuild",

4. Add build config called example in architect.build.configurations:

"architect": {
  "build": {
    "configurations": {
+     "example": {
+       "index": "src/example.html"
+     }

5. Add serve config called example in architect.serve.configurations:

"architect": {
  "serve": {
    "configurations": {
+     "example": {
+       "browserTarget": "angular-esbuild-issue:build:example,development"
+     }

6. Run ng serve -c example, open browser on http://127.0.0.1:4200 and you should see the 404 page as listed above.
7. Exit and and run ng serve -c example, open browser on http://127.0.0.1:4200 and you should see that the server has started and the application is initialized.

Exception or Error

No response

Your Environment

`

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 16.2.1
Node: 16.15.1
Package Manager: npm 8.11.0
OS: darwin x64

Angular: 16.2.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.1
@angular-devkit/build-angular   16.2.1
@angular-devkit/core            16.2.1
@angular-devkit/schematics      16.2.1
@angular/cli                    16.2.1
@schematics/angular             16.2.1
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.1

### Anything else relevant?

_No response_

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}