如何在 angular 2+ 的外部文件中设置 api 端点 url

Question

我有一个普通的问题，当我在开发模式下构建我的 angular 项目并将 dist 文件复制到服务器文件夹时，当更改服务器时 url 我找不到端点 url 来改变它，我必须用新的端点 url.

重建我的项目

以后如何在外部文件中动态定义 webapi 的端点，因为通常我将其存储在 environment.prod.ts 中，如下所示

export const environment = {
    production: true,
    serverBaseUrl: 'http://example.com'
};

并使用命令 this.http.get(environment.serverBaseUrl + '/api/...')

调用服务文件

Answer 1

这是可能的，但我认为不是正确的方式。

一个）如果您使用的是容器和微服务，那么使用像“../api-service/login”这样的相对 URL 是个好主意。如果这个 api 没有相同的根，您可以设置代理或负载平衡器。

b) 另一种方法是设置一个占位符serverbaseUrl：'xxxxxx'，deploy-script可以替换编译后的min.js文件中的xxxxxx。我不喜欢这种方式，但效果很好。

c) 可以将 json 配置文件放入资产文件夹 assets/config/urls.json。这可以在启动时加载（应用程序组件）。这些 url 可以通过静态 forRoot() 设置到每个服务。 forRoot 必须由您实现。
AppComponent 构造函数：

authAjaxService.forRoot(theJsonResponse);

和

@Injectable()
export class AuthAjaxService {

private static readonly config = {
    loginUrl: 'assets/mock-data/auth/login.json',
    logoutUrl: 'assets/mock-data/auth/logout.json',
};

static forRoot(config) {
    Object.assign(this.config, config);
}

login(loginData: LoginRequestData): Observable<LoginResponseData> {
   const url = AuthAjaxService.config.loginUrl;
   return this.http.post<LoginResponseData>(url, loginData);
}
...

c) 会使您的应用启动速度变慢，因为您需要调用 ajax 来获取配置。

如何在 angular 2+ 的外部文件中设置 api 端点 url

How can I set api endpoint url in external file in angular 2+

endpoint

typescript

angular