proxyConfig option is not working with esbuild dev server

[PeterStaev]

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

Trying the new esbuild builder in a project and seems the proxyConfig option in angular config is not considered. For example in .NET Core project we are using proxy to map API calls to the .NET Core dev server. This works perfectly with the webpack builder. With the new builder any call to /api results in a 404 error and the request does not seem to get to the .NET dev server.

I know not all options are supported yet, but in the didn't see proxyConfig being mentioned in the Known Limitations section of the help article.

Minimal Reproduction

angular.json excerpt:

"build": {
  "builder": "@angular-devkit/build-angular:browser-esbuild",
  "options": {
    "outputPath": "dist/my-proj",
    "index": "projects/my-proj/src/index.html",
    "main": "projects/my-proj/src/main.ts",
    "polyfills": "projects/my-proj/src/polyfills.ts",
    "tsConfig": "projects/my-proj/tsconfig.app.json",
    "inlineStyleLanguage": "scss",
    "assets": [
      "projects/my-proj/src/favicon.ico",
      "projects/my-proj/src/assets"
    ],
    "styles": [
      "shared/bootstrap.scss",
      "shared/kendo-theme.scss",
      "projects/my-proj/src/styles.scss"
    ],
    "allowedCommonJsDependencies": [
      "argsarray",
      "immediate",
      "inherits",
      "spark-md5",
      "vuvuzela"
    ],
    "scripts": []
  },
  "configurations": {
    "production": {
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "3.75mb",
          "maximumError": "4mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "2kb",
          "maximumError": "4kb"
        }
      ],
      "fileReplacements": [
        {
          "replace": "projects/my-proj/src/environments/environment.ts",
          "with": "projects/my-proj/src/environments/environment.prod.ts"
        }
      ],
      "outputHashing": "all"
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  },
  "defaultConfiguration": "production"
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "browserTarget": "my-proj:build:production"
    },
    "development": {
      "browserTarget": "my-proj:build:development",
      "proxyConfig": "projects/my-proj/proxy.conf.js"
    }
  },
  "defaultConfiguration": "development"
},

Proxy config file:

module.exports = [
    {
        context: [
            "/api",
            "/signalr"
        ],
        target: "https://localhost:7051",
        secure: false,
        ws: true,
        headers: {
            Connection: 'Keep-Alive'
        }
    }
];

Exception or Error

No response

Your Environment

Angular CLI: 16.0.3
Node: 16.15.1
Package Manager: npm 9.4.2
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.3
@angular-devkit/build-angular   16.0.3
@angular-devkit/core            16.0.3
@angular-devkit/schematics      16.0.3
@schematics/angular             16.0.3
rxjs                            7.5.7
typescript                      5.0.4

Anything else relevant?

No response

[clydin]

Unfortunately, the array form of the proxy configuration is not currently supported by Vite (the underlying development server implementation). We will need to provide an internal transform to allow it to function as expected.
In the interim, you should be able to convert the proxy configuration to the object form to workaround the issue although it does require some duplication:

module.exports = {
  "api/": {
    target: "https://localhost:7051",
    secure: false,
    ws: true,
    headers: {
      Connection: "Keep-Alive",
    },
  },
  "signalr/": {
    target: "https://localhost:7051",
    secure: false,
    ws: true,
    headers: {
      Connection: "Keep-Alive",
    },
  },
};

[PeterStaev]

Thanks @clydin , I can confirm that the object notation of the routes workaround works.

[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.}