[英]What is best practice for coding urls in an angular4 app used in multiple environments?
I have an angular 4 app and I am trying to find a best practices approach to creating a solution for creating a service or some sort of a solution for handling many urls for making http requests in a development as well as a production environment. 我有一个有角度的4应用程序,我试图找到一种最佳实践方法来创建用于创建服务的解决方案,或者用于解决在开发以及生产环境中处理发出http请求的许多URL的某种解决方案。
My solution at this point looks like this. 此时我的解决方案如下所示。
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;
}
}
While I believe this would work fine, there is a small problem because I have to change the activeRoot when switching from development to production environments. 虽然我认为这可以很好地工作,但是存在一个小问题,因为从开发环境切换到生产环境时,必须更改activeRoot。 I am wondering if there is a better way to do this, so I don't have to manually switch. 我想知道是否有更好的方法可以做到这一点,所以我不必手动切换。 I could use javascript to take the url, parse it, and switch between production and development environments in that way, but it seems like there should be a better more angular way to solve this issue. 我可以使用javascript来获取url,进行解析并以这种方式在生产和开发环境之间切换,但是似乎应该有一种更好的角度解决此问题的方法。 Any input on this issue would be greatly appreciated. 在这个问题上的任何投入将不胜感激。 Thanks! 谢谢!
If you're using the Angular CLI, you have a folder called environments
. 如果使用的是Angular CLI,则有一个名为environments
的文件夹。 In this, you have environment.ts
and environment.prod.ts
. 在这里,您具有environment.ts
和environment.prod.ts
。
In both files you have an exported object. 在这两个文件中,您都有一个导出的对象。 In this object, you can add a let apiUrl = 'your URL;
在此对象中,您可以添加let apiUrl = 'your URL;
. 。 Then, in your files, you import only the first one ( environment.ts
) 然后,在文件中, 仅导入第一个文件 ( environment.ts
)
Then, when you build, you just have to run ng build --prod
, and when compiling, instead of using environment.ts
, it will use environment.prod.ts
然后,在构建时,您只需要运行ng build --prod
,并且在编译时,而不是使用environment.ts
,它将使用environment.prod.ts
Is that clear enough ? 够清楚了吗?
use angular cli and you'll get environment.dev.ts and environment.prod.ts built at compile time. 使用angular cli,您将在编译时构建environment.dev.ts和environment.prod.ts。
for example: http://www.alternatestack.com/development/app-development/angular2-environment-specific-configuration/ 例如: http : //www.alternatestack.com/development/app-development/angular2-environment-specific-configuration/
If you are using the Angular CLI you should have two files, src/environments/environment.ts
and src/environments/environment.prod.ts
. 如果使用的是Angular CLI,则应该有两个文件src/environments/environment.ts
和src/environments/environment.prod.ts
。 In this files you can assign environment variables for your production and development purposes. 在此文件中,您可以为生产和开发目的分配环境变量。 Just import { environment } from '../environments/environment'
and you'll be all set. 只需import { environment } from '../environments/environment'
,您将import { environment } from '../environments/environment'
。 The CLI will automatically select the right environment for you. CLI将自动为您选择合适的环境。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.