angular-cli for angular2如何加載環境變量

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

感謝

來源

2016-09-26 Tampa

如果你看看你的角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); 
    } 
}

來源

2016-09-26 14:19:21

但這種方式：從「../../environments/environment」進口{}環境; 你將你的應用程序硬編碼到開發環境。 prod環境文件稱爲environment.prod.ts。如果你做'ng build --prod'，那麼ValuesService如何從environtment.prod獲取url？ – Pascal

構建時，將爲您指定的環境打包相應的環境文件。 –

在發佈了Angular 4.3之後，我們有可能使用HttpClient interceprtors。此方法的優點是避免導入/注入API_URL是所有帶有api調用的服務。

如需更詳細的答案，你可以看看這裏https://stackoverflow.com/a/45351690/6810805

來源

2017-07-28 07:31:34

angular-cli for angular2如何加載環境變量

回答

相關問題