CODEWITHSUNDEEP
angularangular2-cli
Tampa
Tampa

Reputation: 78254

angular-cli for angular2 how to load environment variables

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

Upvotes: 22

Views: 25300

Answers (2)

Mike Kovetsky
Mike Kovetsky

Reputation: 1728

After release of Angular 4.3 we have a possibility to use HttpClient interceprtors. The advantage of this method is avoiding of import/injection of API_URL is all services with api calls.

For more detailed answer you may look here https://stackoverflow.com/a/45351690/6810805

Upvotes: 5

Camille Laborde
Camille Laborde

Reputation: 858

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

Upvotes: 47

Related Questions