2016-09-26 32 views
14

私はangi-cliを初めて使っていて、envでapiサービスを呼び出すためのURLをロードしたいと思います。例えば。angular-cli for angular2どのように環境変数をロードするのですか

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

environment.prod.ts

に私はこの前提としています

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

しかしangular2からの、私はそう呼ぶのですかどのように私はAPI_URLを得ることができますか?

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

おかげ

答えて

37

あなたの角度-CLI年代のルートを見れば、プロジェクトを生成し、あなたがmain.tsに表示されます。

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

あなたのAPIのURLを取得するには、あなただけの持っていますあなたのサービスヘッダーで同じことをする。

環境へのパスは、環境フォルダに関連するサービスの位置によって異なります。私のためには、次のように動作します:

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

しかし、そのように見えるかもしれません:「../../environments/environment」からインポート{環境}; あなたのアプリケーションを開発環境にハードコードします。 prod環境ファイルはenvironment.prod.tsと呼ばれます。あなたが 'ng build --prod'を実行した場合どうすれば?ValuesServiceはenvirontment.prodからURLを取得できますか? – Pascal

+0

ビルドすると、適切な環境ファイルが、指定した環境用にパッケージ化されます。 –

4

Angular 4.3のリリース後、HttpClientインターセプタを使用する可能性があります。このメソッドの利点は、API_URLのインポート/インジェクションを回避することです.API呼び出しを伴うすべてのサービスです。

より詳細な回答について、あなたはここにhttps://stackoverflow.com/a/45351690/6810805

関連する問題