Proxy config not working when custom webpack configuration provided with Angular 17

[savanrajkotiya]

Describe the Bug

When using a custom Webpack configuration with Angular 17, the proxy configuration does not work as expected. The proxy setup defined in the angular.json file is not routing API requests as intended [even if provided using --proxy-config cli command) and throws 404 error/CORS issues. This issue is occurring despite the correct proxy settings being defined in the proxy.conf.json file and the angular.json configuration pointing to the custom Webpack configuration.

Minimal Reproduction

Steps to Reproduce:

1. Create an Angular 17 project using the Angular CLI.
2. Install the necessary dependencies for using a custom Webpack configuration (e.g., @angular-builders/custom-webpack).
3. Configure a custom Webpack configuration (webpack.config.ts) as per the project’s requirements.
4. Define a proxy configuration in a proxy.conf.json file, specifying API routes and targets.
   In the angular.json file, update the build and serve configurations to use the custom Webpack configuration.
   `

// angular.json file changes.
"build": {
          "builder": "@angular-builders/custom-webpack:browser",

          "options": {
            "customWebpackConfig": {
              "path": "src/custom-webpack.config.ts",
              "mergeRules": {
                "plugins": "prepend"
              }
            },
            
   // serve architect changes.
   
    "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
            "options": {
            "servePath": "/project1/",
            "ssl": true,
            "buildTarget": "project1:build"
          },
            ....
       }

Proxy config example file.

proxy.conf.json

  "/api/v1/*": {
        "target": "https://162.20.24.1",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
            "^/api/v1": "api/v1"
        }
    }

** webpack config file **

custom-webpack.config.ts

import { Configuration, EnvironmentPlugin } from 'webpack';
export default {
  plugins: [
    new EnvironmentPlugin({
              APP_VAR: 'test'
            })
  ],
} as Configuration;

5. Run the application using

ng serve --proxy-config=proxy.conf.json

Expected Behavior

Proxy config should work as expected.

Environment

Libs
- @angular/core version:"~17.3.12"
- @angular-devkit/build-angular version: "~17.3.9"
- @angular-builders/custom-webpack version: "^18.0.0"

For Tooling issues:
- Node version: v20.17.0
- Platform: MacOs

[savanrajkotiya]

can anyone please assist with this issue.

[just-jeb]

Hi, I am assuming you tried it without the custom webpack config and it worked?
We're gonna need a repo with minimal reproduction in order to address this issue.