如何在 Angular 应用程序的 environment.prod.ts 中动态配置与后端的连接？

Question

构建一个应用程序，其前端用 Angularjs 开发，后端用 Java（maven）开发。

下面是 Angular 与后端通信的 environment.prod.ts 文件。

export const environment = {
  production: true,
  urlAddress: 'http://localhost:8085'
};

到目前为止，在本地部署了该应用程序，我按如下方式启动了前端和后端，并且该应用程序在本地机器上运行良好 - localhost:4200

frontend 
ng server --host 0.0.0.0

backend
java -jar backend.jar

当我尝试从同一网络中的不同系统访问该应用程序时出现问题。 我可以使用系统部署的 IP 地址（如下所示）而不是 localhost:4200 来访问前端。

192.168.43.214:4200

但是到后端的连接不起作用，当我进行浏览器检查时，发现它尝试访问 localhost:8085 作为后端，因为在 environment.prod.ts 文件中硬编码了 IP 地址 localhost:8085。

当我尝试使用系统 IP 地址单独访问 java 后端服务时，jhipster 页面出现并且工作正常。

192.168.43.214:8085

如下配置的 prod 文件解决了这个问题

export const environment = {
  production: true,
  urlAddress: 'http://192.168.43.214:8085'
};

但是我必须事先知道要运行后端服务的系统的 IP 地址。

由于前端和后端都将在同一台服务器上运行。 如何让 angular 使用自己的 IP 地址进行后端连接。

谢谢，

莫汉

Answer 1

尝试这个

export const environment = {
  production: true,
  urlAddress: 'http://' + window.location.hostname + ':8085'
};

Answer 2

angular 网站详细介绍了如何配置环境文件并在您为不同的环境构建时让系统替换它。