在多个环境中使用的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将自动为您选择合适的环境。