Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
savanrajkotiya opened this issue Nov 9, 2024 · 1 comment

Comments

@savanrajkotiya
Copy link

savanrajkotiya commented Nov 9, 2024

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


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
Copy link
Author

savanrajkotiya commented Nov 9, 2024

can anyone please assist with this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant