相对网址

Question

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

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

如果有人帮助我开始会很棒！

Answer 1

不要对网址进行硬编码。使用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。可以在.angular-cli.json中找到哪个env映射到哪个文件的列表。

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

Answer 2

DEV / PROD奇偶校验方法

使用容器的一种方法是在启动Web服务器之前解析环境文件。前提是您遵循的是良好的做法，也就是说，您没有通过<html> <head> <style> .line { stroke-width: 4px; fill: none; } </style> </head> <script src="https://d3js.org/d3.v6.min.js"></script> <script type="module"> //import {drawLines} from './drawLines.js'; //d3.json("test.geojson").then(drawLines); drawLines(JSON.parse(json1)); </script> <body> <svg id='map'></svg> <button onclick="colorP1(JSON.parse(json1))">colorP1</button> <button onclick="colorP2(JSON.parse(json1))">colorP2</button> </body> </html>来为您的角度应用服务。

例如，一种基本的方法是使用所需的配置来制作teams = [ [("Mustapha", 12), ("Olivier", 13), ("Jean-Paul", 10), ("Loic", 11)], [("Georges", 12), ("Sandrine", 14), ("Alain", 13)], [("Jean-Francois", 13), ("Armelle", 10)], ] def age(teams): for team in teams: for member in team: print(member[1]) age(teams)，这只是一个示例，请按照您的最佳看法进行操作：

ng

在使用静态内容启动Web服务器之前，请使用脚本来验证配置index.html中的有效环境变量并将其与实际环境变量进行匹配。

例如，这对于<script> window.config = { ENV_VAR1: 'ENV_VAR1_PLACEHOLDER', ENV_VAR2: 'ENV_VAR2_PLACEHOLDER', .... } </script>是可行的，或者如果您想成为专业人士，也可以使用window.config。

验证完成后，您的sed在dev-prod parity approach from 12factors之后配置了[jq][1]对象。

运行您的Docker容器将是公正的

index.html

并用于生产

window.config

Answer 3

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

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

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

编辑：这是为了说明。您可能希望在实际代码中使用某种类型的（env-dependent）“config”。

Answer 4

相对网址

在环境配置中放置一个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并从PHP，C＃，Java等后端在localhost：43210上运行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主页面中的基本引用。

Answer 5

您将在 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',
};

Answer 6

您无需使用上述的 environment.prod.ts 文件对上述API_URL进行硬编码。设置-：

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

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

Answer 7

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

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

7 个答案:

DEV / PROD奇偶校验方法

相对网址