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

Question

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

41

我想在生产环境构建时从我的REST API URL中去掉本地服务器前缀（例如：http://localhost:8080）。我知道这与环境文件environment.prod.ts有关，但找不到任何使用它们来实现上述目标的示例。如果有人可以帮助我入门就太好了！

- karthikaruna

使用APP_INITIALIZER将您的服务注入以拉取配置JSON文件。在此处查看示例https://stackoverflow.com/a/65634071/249097 - James Poulose

7个回答

4

相对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，仍然可以将该值配置为空。这在开发环境中从不同的localhost服务器提供应用程序和API时非常有用。例如，您可能会从localhost:4200运行ng serve，并从localhost:43210上运行PHP、C#、Java等后端的API。您需要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 页面中的基本 ref。

- Jess

4

DEV/PROD平衡方法

使用容器的一种方法是在启动Web服务器之前解析环境文件。这需要假设您遵循良好的实践，即您不是通过ng提供angular应用程序。

例如，一个基本的方法是使用所需配置构建index.html，这只是一个例子，您可以根据自己的情况进行操作:

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

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

例如，可以使用sed进行此操作，或者如果您想专业一些，也可以使用[jq][1]。

在验证完成后，您的index.html将遵循12factors的dev-prod平价方法配置window.config对象。

运行您的Docker容器只需执行以下命令： docker run -it -e ENV_VAR1="我的开发值" ... 而对于生产环境，则是： docker run -it -e ENV_VAR1="我的生产值" ...

- Sebastian

这个看起来是一个不错的答案 @Sebastian，但它需要包含一些如何使 Angular 在窗口配置变量不在其渲染范围内时进行编译，以避免构建失败的内容。 - Routhinator

@Routhinator window 可以在 environment.ts 文件中使用，并且您可以从那里导出值。由于 JavaScript 是运行时语言，因此如果该对象未定义，在构建时不会有影响。 - Sebastian

2

您可以在 environment.ts 和 environment.prod.ts 文件中找到URL配置。在调用API时不要使用硬编码的URL。一个好的做法是从 environment.ts 和 environment.prod.ts 文件中读取API URL。对于本地环境，请使用 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',
};

- Shashikant

为什么生产环境的URL在productionurl.com之前有API？ - Nithin Paul

@NithinPaul 这只是一个示例，还可以使用其他有效的网址，比如 http://my.custom.domain.api.prod.com 或任何你想要的地址。 - chick3n0x07CC

1

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

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

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

编辑：这只是为了说明而已。在实际代码中，您可能需要使用某种类型的（与环境相关的）“配置”。

- realharry

1

你不需要像上面提到的那样硬编码API_URL，只需使用你的 environment.prod.ts 文件。设置-：

production = true。
将API_URL更改为所需的URL。
现在运行命令 ng build --prod=true

对我有效，我想会对你有效。

- Abhishek Thakur

1

硬编码API服务器地址的方式并不好。API URL应该存储在配置文件中，以便在不重新编译整个应用程序的情况下进行更改。我认为这是您应该采取的方式：可编辑的配置文件。

- Tomasz Majewski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Akash Tantri · Accepted Answer

不要硬编码URL地址。请使用位于src/environments内的environment.prod.ts 和 environment.ts 文件。对于本地主机，请在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代替。哪个环境映射到哪个文件的列表可以在.angular-cli.json中找到。

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