在多个环境中使用的angular4应用程序中编码URL的最佳做法是什么?

时间:2017-06-20 06:51:36

标签: angular angular-http

我有一个角度4的应用程序,我正在尝试找到一种最佳实践方法来创建一个解决方案来创建一个服务或某种解决方案来处理许多网址,以便在开发和生产环境中发出http请求

此时我的解决方案看起来像这样。

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,解析它,并以这种方式在生产和开发环境之间切换,但似乎应该有更好的角度方式来解决这个问题。关于这个问题的任何意见将不胜感激。谢谢!

3 个答案:

答案 0 :(得分:6)

如果您使用的是Angular CLI,则会有一个名为environments的文件夹。在此,您有environment.tsenvironment.prod.ts

在这两个文件中都有一个导出的对象。在此对象中,您可以添加let apiUrl = 'your URL;。然后,在您的文件中,仅导入第一个environment.ts

然后,在构建时,您只需运行ng build --prod,在编译时,而不是使用environment.ts,它将使用environment.prod.ts

这是否足够清楚?

答案 1 :(得分:2)

使用angular cli,你将在编译时获得environment.dev.ts和environment.prod.ts。

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

答案 2 :(得分:1)

如果您使用的是Angular CLI,则应该有两个文件src/environments/environment.tssrc/environments/environment.prod.ts。在此文件中,您可以为生产和开发目的分配环境变量。只需import { environment } from '../environments/environment',你就可以了。 CLI将自动为您选择合适的环境。