web-dev-qa-db-fra.com

angular-cli for angular2 comment charger les variables d'environnement

Je suis nouveau sur angular-cli et je veux charger les URL pour mes appels de service api par env. Par exemple.

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

par exemple. dans environment.prod.ts

Je suppose ceci:

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

Mais depuis angular2, comment puis-je appeler pour obtenir API_URL?

par exemple.

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

Merci

angularangular2-cli
19
Tampa

Si vous regardez la racine du projet généré par votre angular-cli, vous verrez dans main.ts:

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

Pour obtenir l'URL de votre API, il vous suffit de faire de même dans votre en-tête de service.

Le chemin d'accès à l'environnement dépend de la position de votre service par rapport au dossier d'environnement. Pour moi, cela fonctionne comme ceci:

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);
    }
}
44
Camille Laborde

Après la sortie de Angular 4.3, nous avons la possibilité d'utiliser des intercepteurs HttpClient. L'avantage de cette méthode est d'éviter l'importation/l'injection de API_URL, c'est que tous les services avec des appels api.

Pour une réponse plus détaillée, vous pouvez consulter ici https://stackoverflow.com/a/45351690/6810805

5
Mike Kovetsky