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
    }
}

Inside src->environments, there are 2 files; 1 for development and 1 for prod. — eko, Aug 05 '17 at 18:39
Yes, there are. But for proxy configuration to work, we need to add the above code to a json file. e.g. proxy.config.json. And then this file is invoked via `ng serve --proxy-config proxy.config.json`. So is there a way we can change this based on environment? — Tu Shams, Aug 05 '17 at 18:44
So can't you create 2 different files and point that as the --proxy-config file when running the command? — eko, Aug 05 '17 at 19:09
I don't think creating the files will solve the problem. Since after production build, I will neither be able to set --proxy-config in the command line nor will it work. Please see this https://stackoverflow.com/q/40995791/5128818 — Tu Shams, Aug 05 '17 at 19:19
Surely when you build an angular app the dist files become a static HTML/JavaScript app and that is copied to a web application server for production. Hence you only use angular-cli's server in development and not production. Am I missing something here? — Graham, Aug 05 '17 at 20:59
why cant you use "fileReplacements" array in angular.json. Wont that work when you change environment?? — Manu Mohan, Dec 10 '18 at 12:52

LE GALL Benoît · Answer 1 · 2018-03-25T10:56:15.610

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 :

yout 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 :

score 4 · Accepted Answer · answered Aug 05 '17 at 20:18

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

score 0 · Answer 3 · answered Jun 01 '23 at 12:03

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

Different proxy config based on environment in Angular 2 CLI

3 Answers3

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

What this do :

For example :

Edit

Linked