Angular CLI：在构建时更改 REST API URL

Question

我想在构建生产 (ng build --prod) 时从我的 REST API URL（例如，http://localhost:8080）中删除我的本地服务器前缀。

我知道这与环境文件有关 environment.prod.ts，但找不到任何利用它们来实现上述目的的示例。

如果有人帮助我开始，那就太好了！

Answer 1

一种可能的实现方式是，在您的代码中根据 isDevMode() 定义不同的基本 URL。例如，

import { isDevMode } from '@angular/core';

// ...
let baseUrl: string;
if (isDevMode()) {
    baseUrl = "http://localhost:8080/";
} else {
    baseUrl = "http://api.myprodserver.com/";
}
// ...

编辑：这是为了说明。您可能希望在实际代码中使用某种类型的（依赖环境的）"config"。

Answer 2

不要硬编码 URL。使用 environment.prod.ts 和 environment.ts 文件，它们位于 src/environments 内。对于本地主机，在 environment.ts 文件中使用一些变量来保存您的 url.

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

用于生产，在 environment.prod.ts

export const environment = 
{
    production: true,
    API_URL: 'http://api.productionurl.com',
};

在代码中使用导入变量时，

import { environment } from '../../environments/environment';
....
....

private API_URL= environment.API_URL;

无论何时用于生产，请使用 angular cli 命令选项

ng build --env=prod

当前环境的文件内容将在构建期间覆盖这些内容。构建系统默认为使用 environment.ts 的开发环境，但如果你这样做 ng build --env=prod 然后将使用 environment.prod.ts 代替。 env 映射到哪个文件的列表可以在 .angular-cli.json.

中找到

如需更多查询，请参阅， https://angular.io/guide/deployment

Answer 3

相对 URL

在您的环境配置中放置一个 API_URL 是个好主意，但如果您的 API 和客户端应用程序由同一服务器或域提供服务，您可以 使用改为相对 URL。设置和简化构建过程要容易得多。

这里有一些代码可以存在于 API 服务中。

  get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`/api${path}`, { params })
      .pipe(catchError(this.formatErrors));
  }

如果您使用的是 environment.API_URL，您仍然可以将该值配置为空白。

如果您在开发环境中从单独的本地主机服务器提供您的应用和 API，这会很有帮助。例如，您可能 ng serve 来自 localhost:4200 和运行您的 API 来自 PHP、C#、Java 等后端 localhost:43210。您将需要 API_URL 配置进行开发。

  get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`${environment.api_url}/api${path}`, { params })
      .pipe(catchError(this.formatErrors));
  }

作为奖励，这里有一个 ApiService 示例，它是您可以在应用中使用的可注入对象！

https://github.com/gothinkster/angular-realworld-example-app/blob/63f5cd879b5e1519abfb8307727c37ff7b890d92/src/app/core/services/api.service.ts

同时注意 HTML 主页面中的基本引用。

Answer 4

您将在 environment.ts 和 environment.prod.ts 文件中找到 URL 配置。不要在调用 API 时放置硬编码的 URL。一个好的做法是从 environment.ts 和 environment.prod.ts 文件

中读取 API URLs

本地环境使用environment.ts

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

生产环境使用environment.prod.ts

export const environment = 
{
    production: true,
    API_URL: 'http://api.productionurl.com',
};

Answer 5

您无需如上所述对 API_URL 进行硬编码，只需使用您的 environment.prod.ts 文件即可。设置-:

生产=真。
将 API_URL 更改为您想要的 url。
现在运行命令 ng build --prod=true

我想它对我有用，对你也有用。

Answer 6

以这种或另一种方式硬编码 API 服务器的地址不是一个好方法。 API URL 应该存储在一个配置文件中，可以在不重新编译整个应用程序的情况下进行更改。我认为您应该这样做：Editable config file

Answer 7

DEV/PROD平价方式

使用容器实现此方法的一种方法是在启动网络服务器之前解析环境文件。这假设您遵循了良好的做法，也就是说，您没有通过 ng.

为您的 angular 应用程序提供服务

例如，一个基本的方法是使用您想要的配置来制作您的 index.html，这只是一个示例，按照您认为最好的方式进行：

<script>
  window.config = {
     ENV_VAR1: 'ENV_VAR1_PLACEHOLDER',
     ENV_VAR2: 'ENV_VAR2_PLACEHOLDER',
     ....
  }
</script>

在使用静态内容启动网络服务器之前，请使用脚本验证配置中的有效环境变量，并将其与实际环境变量相匹配window.config。

例如 sed 是可行的，或者如果您想成为专业人士，您也可以使用 [jq][1]。

验证完成后，您的 index.html 在 dev-prod parity approach from 12factors.

之后配置了 window.config 对象

运行你的 docker 容器就是，

docker run -it -e ENV_VAR1="my development value" ...

并用于生产，

docker run -it -e ENV_VAR1="my production value" ...

Angular CLI：在构建时更改 REST API URL

Angular CLI: Change REST API URL on build

angular-cli

angular

angular-webpack

相对 URL

DEV/PROD平价方式