將環境變量傳遞給Angular2應用程序？

Question

我需要將後端url傳遞到我的Angular2應用程序，因爲生產和開發服務器託管在不同的位置。

我知道我可以將這些東西存儲在外部config.json中，並在啓動時加載。但是，這似乎是在應用程序啓動之前不必要的額外調用服務器。

另外，我現在做的是我創建一個單一的全局變量，我注入取決於構建gulp。我的應用程序不是一個需要可重用的庫我不相信我應該打到意外的全局名稱衝突。但這不是一個好習慣。

我想知道是否有第三個更好的解決方案？

Answer 1

我會看到兩種方法可以做到這一點：

• 槓桿在文件中的JSON配置。該文件將boostrapping應用程序之前加載：

  var app = platform(BROWSER_PROVIDERS) 
      .application([BROWSER_APP_PROVIDERS, appProviders]); 
  
  var http = app.injector.get(Http); 
  http.get('config.json').subscribe((config) => { 
      return app.bootstrap(AppComponent, [ 
      provide('config', { useValue: config }) 
      ]); 
  }).toPromise(); 
  

  這裏是描述全球性的辦法相應plunkr：https://plnkr.co/edit/ooMNzEw2ptWrumwAX5zP?p=preview。

• 槓桿配置模塊：

  export const CONFIG = { 
      (...) 
  }; 
  

  自舉應用程序時將被導入幷包含在提供者：

  import {CONFIG} from './config'; 
  
      bootstrap(AppComponent, [ 
      provide('config', { useValue: CONFIG }) 
      ]); 
  

隨着這兩種方法，配置可以被用於定義每個環境打包應用程序時。

這個問題也可以給你提示有關如何打包Angular2應用：

• How do I actually deploy an Angular 2 + Typescript + systemjs app?

Answer 2

我一直在與上述掙扎了一會兒了。儘管蒂埃裏的回答非常好，但我以某種方式發現它對於簡單的env變量來說太複雜了，所以我想我也提出了我的想法。

1）我首先創建一個接口描述我ENV瓦爾app.settings.ts：

，如果你不介意取爲懸而未決

export interface IEnvVars { 
    ENV: string; 
    API_URL: string; 
} 

export class AppSettings { 
    public static env_vars: IEnvVars; 
} 

2）I added the JavaScript fetch API type definitions to my .d.ts file.（不是絕對必要的，但我沒有介意，所以加類型）

3）所以現在我main.ts我可以到返回的環境變量端點的呼叫：

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from './app.component'; 
import {AppSettings,IEnvVars} from "./configs/app.settings"; 
import {enableProdMode} from "angular2/core"; 

fetch('/env-vars', {method: 'get'}).then((response) => { 
    response.json().then((env_vars:IEnvVars) => { 
     AppSettings.env_vars = env_vars; 
     if (AppSettings.env_vars.ENV != 'development') enableProdMode(); 
     bootstrap(AppComponent); 
    }); 
}); 

所以，現在我通過任何服務或組件訪問我的環境變量：

import {AppSettings} from "../configs/app.settings"; 

所以在一個方法等你可以這樣做：

let customersURL = `${AppSettings.env_vars.API_URL}/customers`; 

請注意，您可能需要填充API作爲Safari和IE仍不支持這一點。 （Link to polyfill exampel）

Answer 3

我想這可能對你有用。 Passing asp.net server parameters to Angular 2 app

這樣你可以從注入HTML頁面的任何值（可以從服務器獲取價值，就像當前的環境變量）

Answer 4

只要把變量的環境對象中。

export const environment = { 
    production: false, 
    url: 'http://localhost:3000/api' 
}; 

之後，您可以導入並使用它。 Angular Cli會自動交換文件。

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

P.S.變量在環境對象中可用。

this.url = environment.url 

Answer 5

我已經實現了這個使用以下方法：

1. 創建ts文件爲每個環境。
2. 已修改package.json並在腳本部分爲每個環境添加了一個新條目。

爲如： -

「開始：本地」： 「拷貝\」 配置/ config.local.ts \」 \ 「常量/ global.constants.ts \」 & & NPM運行開始」

導入global.constants到您的應用。

您可以使用啓動HTTP服務器：npm run start:local

Answer 6

在不同環境的location.host的值會有所不同。

將此項作爲鍵使用，並從相應的json加載具有所有URL的值。

相關的代碼看起來可能是這樣：

let env = location.host; 
if (env === 'prod.example.com') { 
    config = 'ProdConfig.json'; 
} else if (env === 'test.example.com') { 
    config = 'TestConfig.json'; 
} else if (env === 'localhost') { 
    config = 'DevConfig.json'; 
}