angularangular2-cli

Different proxy config based on environment in Angular 2 CLI


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

Solution

  • 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