如何在角度 2+ 的外部文件中设置 api 端点 url答案

【问题标题】：How can I set api endpoint url in external file in angular 2+如何在角度 2+ 的外部文件中设置 api 端点 url
【发布时间】：2020-05-17 18:16:06
【问题描述】：

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

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

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

并使用命令this.http.get(environment.serverBaseUrl + '/api/...')调用服务文件

【问题讨论】：

标签： angular typescript endpoint

【解决方案1】：

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

一）如果您使用容器和 mircroservice，最好使用像“../api-service/login”这样的相对 URL。如果这个api没有同一个root，你可以设置一个代理或者负载均衡器。

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 调用来获取配置。

【讨论】：

谢谢。为了简单使用我可以在环境文件中使用这个结构serverBaseUrl: 'assets/config/urls.json'
不，这不是你想要的。