Angular2 web pack proxy configuration

Question

Since angular-cli is maturing nicely, I decided to port an Angular2 app to take advantage of angular-cli awesomeness. However proxying to an external remote service running on localhost is taking on a wild trip.

Version Info

ng --version
angular-cli: 1.0.0-beta.19-3
node: 7.0.0
os: darwin x64

So from angular app, I would like to proxy all /service/** requests to a RESTful api running on nginx @ http://localhost.api.co.za

Configurations

{
  "/service/*" : {
    "target":"http://localhost.api.co.za/",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
    "^/service": ""
    }
  }
}

nginx access.log prints out a 404 POST /api/v1/testing HTTP/1.1" 404 169 "http://localhost:4200/contact"

Tried all the tricks in this port webpack-dev-server proxy dosen't work

isawk isawk · Accepted Answer · 2016-11-14T04:55:51

After multiple adjustments and trolling through web pack documentation along with http-proxy-middleware docs on github

Configurations that worked for my case where:

{
  "/service" : {
    "target":"http://localhost.api.co.za",
    "secure": false,
    "changeOrigin": true
  }
}

Angular2 web pack proxy configuration

1 Answers