Question

我正在使用环境变量apiHost设置服务器URL。

export const environment = {
  production: true,
  apiHost: ':8080'
};

这提供了以下URL： http://myserver/:8080，我想拥有http://myserver:8080/。

该应用程序（后端和前端）将发送到多个客户端，因此没有要设置的公共服务器URL。我该如何做到这一点（甚至使用环境以外的方法）？

编辑：使用环境变量的示例

getProducts() {
    return this.httpClient.get<Product[]>(environment.apiHost + 'products');
  }

Answer 1

环境文件是用于配置应用程序的文件。

使用时，它们可以根据您选择用来构建应用程序的环境（或A6中的配置）自动更改属性。

让我们用一个例子来解决这个问题。假设您有两个客户端A和B，并且想让他们选择其API地址。

您将首先创建第一个environment.ts，它是基本的：

export const environment = {
  production: false,
  api: 'http://localhost:8080';
};

现在，您的客户会给您他们的API地址。您将必须为每个客户端编写一个新文件。

环境A.ts

export const environment = {
  production: true,
  api: 'http://www.A.com:8080';
};

environment.B.ts

export const environment = {
  production: true,
  api: 'http://www.B.com:8080';
};

现在，在您的服务中，您所要做的就是请求环境文件（基础文件）。例如：

import { environment } from 'src/environments/environment'

export class UserService {
  constructor(private http: HttpClient) {}

  getUsers() { return this.http.get<any>(environment.api); }
}

应用程序完成后，您将必须构建它。那就是切换环境的地方。

对于第一个客户端，您将运行该客户端（考虑到您已正确设置angular-cli.json文件）

ng build --prod --env A

第二个：

ng build --prod --env B

有了它，您无需执行其他任何操作：您的HTTP调用将发送到正确的API地址。

如果仅在您的环境中输入端口，则意味着您已在应用程序中对URL进行了硬编码，这意味着客户端将无法对其进行更改。

如果您没有对该URL进行硬编码，但是该URL不在环境文件中，那么您就没有遵循Angular建议的最佳实践。最糟糕的是，您没有充分利用框架的潜力。

使用环境变量将端口添加到所有URL

1 个答案: