just-jeb / angular-builders

Angular build facade extensions (Jest and custom webpack configuration)
MIT License
1.15k stars 198 forks source link

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

Open savanrajkotiya opened 4 days ago

savanrajkotiya commented 4 days ago

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;
  1. Run the application using
    
    ng serve --proxy-config=proxy.conf.json


## Expected Behavior

Proxy config should work as expected.

## Environment

<pre><code>
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 commented 4 days ago

can anyone please assist with this issue.