Angular 2 个应用程序的可配置后端

Question

我有一个 Angular 2 应用程序，它将安装在多台服务器上，并且需要访问同样位于多台服务器上的后端。我正在使用 this answer 中的代码，特别是与 GET 以外的方法一起使用的编辑，如果我对后端 URL.

进行硬编码，则效果很好

对于给定的前端服务器，它需要访问的后端总是相同的。例如，如果前端处于 "example.com"，后端将始终处于 "example.com:9080".

我可以为每个不同的服务器捆绑应用程序，根据需要将答案中的 "localhost:9080" 更改为 "example1.com:9080"、"example2.com:9080" 等。这意味着必须更改代码并为每个服务器捆绑应用程序。

有什么方法可以获取我需要为后端访问的 URL，以便我可以将其捆绑一次并将其部署到所有服务器？

我正在使用 Angular 2.4.5 并使用 Apache 为前端提供服务。

Answer 1

我的目标是 IIS，所以我使用 http 处理程序根据环境动态解决这个问题，但您可以使用单个 js 文件来实现它，如下所示：

按以下方式创建一个包含要加载到应用程序中的设置的 js 文件：
```
var js = {}; js.settings = { API_URL : 'your_api_url_here' };
```
创建一个 class 以在您的应用中映射这些值：
```
export class Settings { API_URL: string; }
```
请确保 js 文件将在您的应用程序脚本之前加载，因此将其放入您的 index.html:
```
<script src="env.js"></script>
```

现在在您的 app.module 中，将这些值映射到您的设置 class 并定义它们的提供方式：


// needed to avoid the TS compilation error. 
// This can be placed at the top of your app.module file. 
declare var js: any;

@NgModule({ 
       imports: [...], 
       declarations: [...], 
       providers: [{
       provide: Settings, useFactory: ()=> { return js.settings; }}] }) 
export class AppModule{}

现在在您可能需要的任何地方注入设置对象，如下所示：


export class ServiceBase {
    protected apiUrl: string;
    constructor(private settings: Settings){
        this.apiUrl = settings.API_URL;
}

希望这对您也有用。

Answer 2

你真的不想在你的应用程序中有这个。这应该是配置，因为它取决于您所在的服务器（换句话说，您不想在以后添加服务器时更改代码和重建）。因此，我猜你真的想在你的 apache 服务器上解决这个问题。您可以考虑使用 ProxyPass 和 ProxyPassReverse（在 httpd.conf 或 htaccess 中）。这样你就不必在你的应用程序中担心它，你只会使用到你的 api 端点的相对路径。

例如，假设您的 angular 应用是从 example.com 提供服务的，并且您的后端 api 位于 example.com:9080/api/ .

您的代码将简单地使用 /api 作为您端点的路径，ProxyPass 将使用以下方式将这些重写到后端：

ProxyPass /api example.com:9080
ProxyPassReverse /api example.com:9080

您需要安装 MOD_PROXY（在大多数主机上很常见）：https://httpd.apache.org/docs/current/mod/mod_proxy.html

Angular 2 个应用程序的可配置后端

Configurable backend for Angular 2 app

angular2-http

angular