angular-cli for angular2 how to load environment variables

Question

I am new to the angular-cli and want to load url's for my api service calls by env. E.g.

local: http://127.0.0.1:5000
dev: http://123.123.123.123:80
prod: https://123.123.123.123:443

e.g. in environment.prod.ts

I assume this:

export const environment = {
  production: true
  "API_URL": "prod: https://123.123.123.123:443"
};

But from angular2, how do I call so I can get API_URL?

e.g.

this.http.post(API_URL + '/auth', body, { headers: contentHeaders })
      .subscribe(
        response => {
          console.log(response.json().access_token);
          localStorage.setItem('id_token', response.json().access_token);
          this.router.navigate(['/dashboard']);
        },
        error => {
          alert(error.text());
          console.log(error.text());
        }
      );
  } 

Thanks

Answer 1

If you look at the root of your angular-cli's generated project, you will see in main.ts :

import { environment } from './environments/environment';

To get your api URL, you just have to do the same in your service header.

The path to environment is depending on the position of your service related to the environment folder. For me, it works like this :

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { environment } from '../../environments/environment';

@Injectable()
export class ValuesService {
    private valuesUrl = environment.apiBaseUrl + 'api/values';
    constructor(private http: Http) { }

    getValues(): Observable<string[]> {
        return this.http.get(this.valuesUrl)
        .map(this.extractData)
        .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || { };
    }

    private handleError(error: any) {
        let errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg);
        return Observable.throw(errMsg);
    }
}