在为生产 ( ) 构建时，我想从我的 REST API URL (例如http://localhost:8080ng build --prod ) 中删除我的本地服务器前缀。
我知道这与环境文件有关environment.prod.ts，但找不到任何使用它们来实现上述目的的示例。
如果有人帮助我开始，那就太好了！
问问题
36686 次
7 回答
60
不要对 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将被使用。哪个 env 映射到哪个文件的列表可以在.angular-cli.json.
有关更多查询，请参阅 https://angular.io/guide/deployment
于 2017-11-22T05:32:56.697 回答
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 提供服务，这会很有帮助。例如，您可能ng serve从 localhost:4200 并从 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 页面中的基本引用。
于 2019-01-07T13:47:12.723 回答
1
DEV/PROD 平价方法
使用容器的一种方法是在启动 Web 服务器之前解析环境文件。这假设您正在遵循一个良好的做法，也就是说，您没有通过ng.
例如，一个基本的方法是index.html用你想要的配置来制作你的，这只是一个例子，按照你认为最好的方式去做：
<script>
window.config = {
ENV_VAR1: 'ENV_VAR1_PLACEHOLDER',
ENV_VAR2: 'ENV_VAR2_PLACEHOLDER',
....
}
</script>
在使用静态内容启动网络服务器之前，请使用脚本来验证配置中window.config的有效环境变量并将其与实际环境变量匹配。
例如，这是可行sed的，或者如果你想成为专业人士，你也可以使用[jq][1].
验证完成后，您index.html已按照12factorswindow.config的 dev-prod 奇偶校验方法配置了对象。
运行你的 docker 容器就可以了，
docker run -it -e ENV_VAR1="my development value" ...
对于生产，
docker run -it -e ENV_VAR1="my production value" ...
于 2020-12-16T11:29:10.930 回答
1
实现这一目标的一种可能方法是，根据isDevMode()您的代码定义不同的基本 URL。例如，
import { isDevMode } from '@angular/core';
// ...
let baseUrl: string;
if (isDevMode()) {
baseUrl = "http://localhost:8080/";
} else {
baseUrl = "http://api.myprodserver.com/";
}
// ...
编辑：这是为了说明。您可能希望在实际代码中使用某种类型的（依赖于环境的）“配置”。
于 2017-11-22T04:29:11.253 回答
1
您不需要像上面提到的那样对 API_URL 进行硬编码，只需使用您的environment.prod.ts文件即可。放-：
- 生产=真。
- 将 API_URL 更改为您想要的 URL。
- 现在运行命令ng build --prod=true
我猜它对我有用，对你也有用。
于 2020-05-29T06:33:58.050 回答
1
您将在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',
};
于 2020-01-08T12:56:55.557 回答
0
以这种或其他方式硬编码 API 服务器的地址不是一个好方法。API URL 应存储在配置文件中，无需重新编译整个应用程序即可更改。我认为这是您应该这样做的一种方式：可编辑的配置文件
于 2020-09-11T09:48:18.993 回答