Different proxy config based on environment in Angular 2 CLI

Question

How can I declare 2 different proxy URLs for development and production environments in Angular 2 CLI project? For example, while in development mode, I would like to use

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

but in production mode, I will use

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

Answer 1

I do not believe you can control the proxy feature through the environment files. An alternative could be to define your api domains in your environment files

// environment.ts
export const environment = {
    production: false,
    api: 'http://localhost:3000'
};

// environment.prod.ts
export const environment = {
    production: true,
    api: 'http://api.exampledomain.com'
}

then in your ts source files pull the domain from the environment file

// some service
import { Injectable } from '@angular/core';
import { environment } from '../../../environment.ts';
import { Http } from '@angular/http';

@Injectable()
export class SomeService {
    constructor(private http: Http);

    getData(){
        return this.http.get(environment.api + '/rest-of-api');
    }
}

now when you run your build or serve commands they will use the api path defined in the environment file

Answer 2

in fact, you can do it, you just need to configure the router :

{
    "/api": {
        "target": "https://api.exampledomain.com",
        "secure": false,
        "logLevel": "debug",
        "router": {
          "localhost:4200" : "http://localhost:3000/exampledomain",
          "staging.exampledomain.com" : "http://api.staging.exampledomain.com"
        }
    }
}

What this do :

• your url match the proxy => will call the target defined
• the host url match one router configuration => use the new target

For example :

I've deployed on localhost:4200 my angular app, when calling the url "api/callMeMaybe", then the router detect it and redirect in "http://localhost:3000/exampledomain".
If I've been on staging.exampledomain.com then the redirection will have be to "http://api.stagging.exampledomain.com".
Then, if none match, it keep the original target redirection.

Be careful, as order matters (the 1st match will be take)

Here is the documentation with an example

Edit

You can find the host value on your chrome debugger Network tab and selecting the api call, you get this details :

Answer 3

You could have 2 proxy configurations, proxy.conf.json and proxy.prod.conf.json and update your angular.json file as follow:

"serve": {
  "configurations": {
     "production": {
         "browserTarget": "webapp:build:production",
         "proxyConfig": "src/proxy.prod.conf.json"
      },
      "development": {
         "browserTarget": "webapp:build:development",
         "proxyConfig": "src/proxy.conf.json"
      }
  },
  "defaultConfiguration": "development"
},

so that the convient proxy configuration is loaded based on current environment