angular-cli para angular2 cómo cargar variables de entorno

environment angular 6

Question

Soy nuevo en angular-cli y quiero cargar url para mis llamadas de servicio de api por env. P.ej

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

por ejemplo, en environment.prod.ts

Asumo esto:

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

Pero desde angular2, ¿cómo llamo para obtener API_URL?

p.ej

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

Gracias

Answer 1

Después del lanzamiento de Angular 4.3, tenemos la posibilidad de utilizar los interceptores HttpClient. La ventaja de este método es evitar la importación / inyección de API_URL en todos los servicios con llamadas a la API.

Para obtener una respuesta más detallada, puede consultar aquí https://stackoverflow.com/a/45351690/6810805

Answer 2

Si observa la raíz del proyecto generado de su angular-cli, verá en main.ts:

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

Para obtener la URL de su API, solo tiene que hacer lo mismo en el encabezado de su servicio.

La ruta al entorno depende de la posición de su servicio relacionado con la carpeta de entorno. Para mí, funciona así:

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