angular-cli server - how to proxy API requests to

Question

With the angular-cli ng serve local dev server, it's serving all the static files from my project directory.

How can I proxy my AJAX calls to a different server?

Answer 1

Here is another working example (@angular/cli 1.0.4):

proxy.conf.json :

{
  "/api/*" : {
    "target": "http://localhost:8181",
    "secure": false,
    "logLevel": "debug"
  },
  "/login.html" : {
    "target": "http://localhost:8181/login.html",
    "secure": false,
    "logLevel": "debug"
  }
}

run with :

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

Answer 2

We can find the proxy documentation for Angular-CLI over here:

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

After setting up a file called proxy.conf.json in your root folder, edit your package.json to include the proxy config on ng start. After adding "start": "ng serve --proxy-config proxy.conf.json" to your scripts, run npm start and not ng serve, because that will ignore the flag setup in your package.json.

current version of angular-cli: 1.1.0

Answer 3

EDIT: THIS NO LONGER WORKS IN CURRENT ANGULAR-CLI

See answer from @imal hasaranga perera for up-to-date solution

---

The server in angular-cli comes from the ember-cli project. To configure the server, create an .ember-cli file in the project root. Add your JSON config in there:

{
   "proxy": "https://api.example.com"
}

Restart the server and it will proxy all requests there.

For example, I'm making relative requests in my code to /v1/foo/123, which is being picked up at https://api.example.com/v1/foo/123.

You can also use a flag when you start the server: ng serve --proxy https://api.example.com

Current for angular-cli version: 1.0.0-beta.0

Answer 4

It's important to note that the proxy path will be appended to whatever you configured as your target. So a configuration like this:

{
  "/api": {
    "target": "http://myhost.com/api,
    ...
  }
}

and a request like http://localhost:4200/api will result in a call to http://myhost.com/api/api. I think the intent here is to not have two different paths between development and production environment. All you need to do is using /api as your base URL.

So the correct way would be to simply use the part that comes before the api path, in this case just the host address:

{
  "/api": {
    "target": "http://myhost.com",
    ...
  }
}

Answer 5

To my knowledge with Angular 2.0 release setting up proxies using .ember-cli file is not recommended. official way is like below

1. edit "start" of your package.json to look below

   "start": "ng serve --proxy-config proxy.conf.json",

2. create a new file called proxy.conf.json in the root of the project and inside of that define your proxies like below

   {
     "/api": {
       "target": "http://api.yourdomai.com",
       "secure": false
     }
   }
   

3. Important thing is that you use npm start instead of ng serve

Read more from here : Proxy Setup Angular 2 cli

UPDATE 2017

Better documentation is now available and you can use both JSON and JavaScript based configurations: angular-cli documentation proxy

sample https proxy configuration

{
  "/angular": {
     "target":  {
       "host": "github.com",
       "protocol": "https:",
       "port": 443
     },
     "secure": false,
     "changeOrigin": true,
     "logLevel": "info"
  }
}

Answer 6

I'll explain everything you need to know on this example:

{
  "/folder/sub-folder/*": {
    "target": "http://localhost:1100",
    "secure": false,
    "pathRewrite": {
      "^/folder/sub-folder/": "/new-folder/"
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

1. /folder/sub-folder/* path says: When I see this path inside my angular 2 application (the path can be stored anywhere) I want to do something with it. The * character indicates that everything which follows the sub-folder will be included. For instance, if you have multiple fonts inside /folder/sub-folder/, the * will pick up all of them

2. "target": "http://localhost:1100" for the path above make target url the host/source, therefore in the background we will have http://localhost:1100/folder/sub-folder/

3. "pathRewrite": { "^/folder/sub-folder/": "/new-folder/" }, Now let's say that you want to test your application locally, the http://localhost:1100/folder/sub-folder/ maybe contains in invalid path: /folder/sub-folder/. You want to change this path to a correct path which is http://localhost:1100/new-folder/, therefore the pathRewrite will become very useful. It will exclude the path in the application(left side) and include the newly written one (right side)

4. "secure" attribute represents wether we are using http or https. If https is used in the target attribute then set secure attribute to true otherwise set it to false

5. "changeOrigin": option is only necessary if your host target is not the current environment, for example: localhost. If you want to change the host to www.something.com which would be the target in the proxy then set the changeOrigin attribute to "true":

6. "logLevel" attribute specifies wether the developer wants to output the proxying on his terminal, therefore he would use the "debug" value as shown on the image

In general the proxy helps you to develop application locally. You set your paths of the files for production purpose and if you have all this files locally inside your project you may just use proxy to access them without changing the path dynamically in your app.

If it works, you should see something like this in your cmd/terminal