如何配置在角2應用

不同的開發環境，我有一個恆定的文件如何配置在角2應用

export class constants { 
    public static get API_ENDPOINT(): string { return 'https://dvelopment-server/'; } 
}

而且我把它導入到我的服務

private _registrationUrl = constants.API_ENDPOINT+'api/v1/register';

我怎樣才能改變與服務器改變endpont。我有開發服務器登臺服務器和本地服務器。我想要應用程序來檢測環境變化。

在我的角1應用程序中，我使用了envserviceprovider。我可以在角度2應用程序中使用相同的嗎？使用Angular CLI：

來源

2016-03-15 Minna zacharias

我認爲你可以在angular2做到這一點也。不知道angular2中有這個庫的等價物，但我相信你可以輕鬆地複製它。您必須檢查您的應用程序正在運行的域（localhost，devserver.com等），並基於該域可以從服務的配置對象中設置設置變量。 – eesdil

如何檢查角2應用程序運行的域名 –

您可以使用位置，甚至在webworker中工作，前提是自身是前綴https://developer.mozilla.org/en-US/docs/Web/API/Location，https：// developer.mozilla.org/en-US/docs/Web/API/WorkerLocation' – eesdil

-1

我已經通過添加一個類的方法

export class config { 

    public static getEnvironmentVariable(value) { 
     var environment:string; 
     var data = {}; 
     environment = window.location.hostname; 
     switch (environment) { 
      case'localhost': 
       data = { 
        endPoint: 'https://dev.xxxxx.com/' 
       }; 
       break; 
      case 'uat.server.com': 
       data = { 
        endPoint: 'https://uat.xxxxx.com/' 
       }; 
       break; 

      default: 
       data = { 
        endPoint: 'https://dev.xxxx.com/' 
       }; 
     } 
     return data[value]; 
    } 
}

在我的服務

private _loginUrl = config.getEnvironmentVariable('endPoint')+'api/v1/login;

來源

2016-03-15 11:28:17

+25

我不喜歡這個解決方案，它公開了開發環境的內部。我正在考慮使用Grunt在連接之前將目標相關文件複製到位，並定義配置類。但是，我覺得應該有更好的方法。 – Dave

+10

這只是一個糟糕的解決方案。這不應該被接受的答案。 – eav

爲什麼在有環境時使用另一個班級？ @zavié提供了一個很好的解決方案 – David

簡短的回答解決了問題。它 ~~處於測試階段，但~~ 工作得很好，並且由Angular團隊推薦用於啓動新項目。有了這個工具，你可以配置不同的環境。在編譯時，src/client/app/environment.ts將被替換爲config/environment.dev.ts或config/environment.prod.ts，具體取決於當前的CLI環境。

環境默認爲dev，但您可以通過ng build -prod或ng serve -prod中的-prod標誌生成生產版本。鑑於這是一項新功能，可能會有點混淆，因此有關如何使用CLI設置Angular Environments的更多信息，請參見this great guide。

希望這會有所幫助。

來源

2016-05-29 18:44:45 Cartucho

請注意，指南中的'import'命令似乎不再有效（可能路徑已更改）。這對我有效：'從'../../ environments/environment'中導入{environment};' –

這是我用過的方式，非常棒。我們還有一個測試環境，它使用與dev和prod不同的配置，因此我添加了第三個環境「test」，並通過angular-cli.json中的「environments」映射它。因此，根據環境，它會採用適當的配置。 –

@zavié可能從'app /../ environments/environment;'導入{environment}「會更好，因爲它適用於每個文件位置。 – Cartucho

我只想添加一些更多的光照@Cartucho提供的答案。他對於爲角度2應用程序設置個性化環境所需的步驟是正確的。我也想第二個意見，那篇文章在Guide to Build the app in different environments

但是給出的文章錯過了一個重要的步驟。設置個性化環境的步驟如下： 1）在項目的environments文件夾中創建一個名爲environment.YourEnvName.ts的新文件。 2）在「環境」對象中添加環境描述 angular-cli.json文件。

"environments": { 
    "source": "environments/environment.ts", 
    "prod": "environments/environment.prod.ts", 
    "dev": "environments/environment.dev.ts", 
    "qa": "environments/environment.qa.ts", 
    "YourEnvName": "environments/environment.YourEnvName.ts" 
    }

3）一旦你做出這些改變，你可以建立使用以下命令你的新環境中的應用。

ng build --environment=YourEnvName or 

ng serve --environment=YourEnvName

希望這篇文章對任何新的Angular 2開發者都有幫助。

來源

2017-01-31 16:49:01

export class endPointconfig { 

    public static getEnvironmentVariable() { 
     let origin = location.origin; 
     let path = location.href.split('/')[3]; 
     let value = origin +'/'+ path + '/api/';`enter code here`  
     return value; 
    } 
}

來源

2017-02-23 03:51:53

只需調用endPointConfig類即可返回網址 –

我希望它有幫助。

首先，創建development.ts，staging.ts，production.ts配置文件。二，在你的索引中。帕格，導入環境文件以下列方式：

SystemJS.import("#{settings.env}").then(function(env) { 
     System.import("app").catch(console.error.bind(console)); 
    } // Promise.all also works!

請記住，在的NodeJS /帕格/玉settings.env包含NODE_ENV值。

最後，您system.config.ts地圖應該有下面幾行：

"development": "myUrl/configs/development.js", 
    "staging": "myUrl/configs/staging.js", 
    "production": "myUrl/configs/production.js",

來源

2017-03-22 03:38:58

如何配置在角2應用

回答

相關問題