如何在 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 作为后端，因为 IP 地址 localhost:8085 硬编码在 environment.prod.ts 文件。

当我尝试使用系统 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

angular website 详细介绍了如何配置环境文件以及在针对不同环境构建时让系统替换它。

Answer 2

试试这个

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

how to Configure connection to backend dynamically in environment.prod.ts of Angular app?