在为生产 (ng build --prod) 构建时，我想从我的 REST API URL 中删除我的本地服务器前缀（例如，http://localhost:8080）。
我知道这与环境文件environment.prod.ts 有关，但找不到任何使用它们来实现上述目的的示例。
如果有人帮助我开始，那就太好了！
【问题讨论】：
标签： angular angular-cli angular-webpack
不要对 URL 进行硬编码。 使用 src/environments 中的 environment.prod.ts 和 environment.ts 文件。 对于 localhost，在 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
【讨论】：
environment）的文件中不会让您避免硬编码：耸耸肩：。 API URL 应通过环境变量设置。名为environment 的文件中的变量不是环境变量。
index.html 文件中。为此，您必须使用例如可变占位符来制作您的 index.html。
在您的环境配置中放置一个 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，这会很有帮助。例如，您可能来自 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 示例，它是您可以在应用程序中使用的可注入对象！
还要注意 HTML 主页中的基本引用。
【讨论】：
实现此目的的一种可能方法是，在代码中根据isDevMode() 定义不同的基本 URL。例如，
import { isDevMode } from '@angular/core';
// ...
let baseUrl: string;
if (isDevMode()) {
baseUrl = "http://localhost:8080/";
} else {
baseUrl = "http://api.myprodserver.com/";
}
// ...
编辑：这是为了说明。您可能希望在实际代码中使用某种类型的（依赖于环境的）“配置”。
【讨论】：
您将在 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',
};
【讨论】：
您不需要像上面提到的那样对 API_URL 进行硬编码，只需使用您的 environment.prod.ts 文件即可。 设置-：
我猜它对我有用，对你也有用。
【讨论】：
使用容器的一种方法是在启动网络服务器之前解析环境文件。这假设您遵循良好的做法，也就是说，您没有通过 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" ...
【讨论】：
以这种或其他方式硬编码 API 服务器的地址不是一个好方法。 API URL 应存储在配置文件中，无需重新编译整个应用程序即可更改。我认为这是你应该这样做的一种方式：Editable config file
【讨论】：