在多個環境中使用的angular4應用中對URL進行編碼的最佳實踐是什么？

Question

我有一個有角度的4應用程序，我試圖找到一種最佳實踐方法來創建用於創建服務的解決方案，或者用於解決在開發以及生產環境中處理發出http請求的許多URL的某種解決方案。

此時我的解決方案如下所示。

import { Injectable } from '@angular/core';
/**
 * PathsService is like a properties file for all of the URL paths used in the application.
 */
@Injectable()
export class PathsService {

  constructor() {}

  productionEnvironment:string = "https://myproductionenvironment.com"
  developmentEnvironment:string = "https://mydevelopmentenvironment.com"

  activeRoot:string = productionEnvironment;


  loginResource = "/loginresources"
  employeeResource = "/employeeresouces"

  public getLoginResources(): string {
    return this.activeRoot+this.loginResource;
  }

  public getEmployeeResource():string {
    return this.activeRoot+this.employeeResource;
  }




}

雖然我認為這可以很好地工作，但是存在一個小問題，因為從開發環境切換到生產環境時，必須更改activeRoot。 我想知道是否有更好的方法可以做到這一點，所以我不必手動切換。 我可以使用javascript來獲取url，進行解析並以這種方式在生產和開發環境之間切換，但是似乎應該有一種更好的角度解決此問題的方法。 在這個問題上的任何投入將不勝感激。 謝謝！

Answer 1

如果使用的是Angular CLI，則有一個名為environments的文件夾。 在這里，您具有environment.ts和environment.prod.ts 。

在這兩個文件中，您都有一個導出的對象。 在此對象中，您可以添加let apiUrl = 'your URL; 。 然后，在文件中， 僅導入第一個文件 （ environment.ts ）

然后，在構建時，您只需要運行ng build --prod ，並且在編譯時，而不是使用environment.ts ，它將使用environment.prod.ts

夠清楚了嗎？

Answer 2

使用angular cli，您將在編譯時構建environment.dev.ts和environment.prod.ts。

例如： http : //www.alternatestack.com/development/app-development/angular2-environment-specific-configuration/

Answer 3

如果使用的是Angular CLI，則應該有兩個文件src/environments/environment.ts和src/environments/environment.prod.ts 。 在此文件中，您可以為生產和開發目的分配環境變量。 只需import { environment } from '../environments/environment' ，您將import { environment } from '../environments/environment' 。 CLI將自動為您選擇合適的環境。