Use angular-cli with multiple path proxy matching

Question

How can I define multiple paths to proxy in my proxy.conf.json? The angular-cli proxy documentation on github looks like you can only have one path (/api):

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

But when I look into the webpack proxy or the http-proxy-middleware documentation, I see it should be possible to define multiple paths (/api-v1 and /api-v2):

// Multiple entry
proxy: [
  {
    context: ['/api-v1/**', '/api-v2/**'],
    target: 'https://other-server.example.com',
    secure: false
  }
]

But I don't understand how I can get this into the proxy.conf.json.

https://github.com/angular/angular/blob/6ad057d28cf432ff0c67d3fcf9fc9a51aa5c43a5/aio/content/guide/build.md#proxy-multiple-entries — yurzui, Feb 19 '21 at 13:05

score 11 · Accepted Answer · edited Nov 08 '17 at 06:34

11

Use the following syntax in your proxy.conf.json:

[
  {
    "context": ["/api-v1/**", "/api-v2/**"],
    "target": "https://other-server.example.com",
    "secure": false
  }
]

Actual syntax that works is as below:

[
    {
        "context": [
            "/api",
            "/other-uri"
        ],
        "target": "http://localhost:8080",
        "secure": false
    }
]

edited Nov 08 '17 at 06:34

Hardik Trivedi

5,395
3
28
53

answered Jun 12 '17 at 07:47

Hans

573
1
6
22

2

Works, but where is this syntax documented? – Markus Pscheidt Dec 07 '17 at 13:37
https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md – NetProvoke Sep 27 '19 at 20:37

Martin · Answer 2 · 2018-06-15T09:56:32.057

The syntax for multiple entries (using context) is documented here: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md#multiple-entries

const PROXY_CONFIG = [
    {
        context: [
            "/my",
            "/many",
            "/endpoints",
            "/i",
            "/need",
            "/to",
            "/proxy"
        ],
        target: "http://localhost:3000",
        secure: false
    }
]

module.exports = PROXY_CONFIG;

This also requires that you rename your config from .json to .js and point your run command at the new file.

For me the context syntax doesn't quite work (I assume because I want to use wildcards). So I came up with the following solution which allows you to generate a config:

module.exports = [
  "/my",
  "/many",
  "/endpoints",
  "/i",
  "/need",
  "/to",
  "/proxy",
  "/folder/*"
].reduce(function (config, src) {
  config[src] = {
    "target": "http://localhost:3000",
    "secure": false
  };
  return config;
}, {});

This got the job done for me. (note that this still requires that your rename your proxy.conf.json to proxy.conf.js and edit your run command to point at the renamed file)

score 0 · Answer 3 · edited Mar 22 '21 at 16:21

As of 2021-03, here is the answer:

In the CLI configuration file, angular.json, add/modify the proxy file:

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.js"
    },
...

Create a `proxy.conf.js such as:

const PROXY_CONFIG = [
    {
        context: [
            "/my",
            "/many",
            "/endpoints",
            "/i",
            "/need",
            "/to",
            "/proxy"
        ],
        target: "http://localhost:3000",
        secure: false
    }
]
module.exports = PROXY_CONFIG;

Official Details

Use angular-cli with multiple path proxy matching

3 Answers3