如何在服务中自动更改URL，在更改URL后，它应该影响到所有组件，而无需在angular6中保存/构建/运行

Question

我们正在用angular 6托管一个新的应用程序，我们有很多带有不同URL的服务器，我想自动更改它们(比如java中的.properties文件)。在谷歌上搜索后，我得到了一些答案，比如在environment.ts文件中更改路径，所以它会影响所有组件。但这并不完全是我的要求，这意味着如果我更改environment.ts文件中的URL，我们应该保存该文件，并需要再次编译它。所以这正是我面临的问题，我不想保存/编译文件。

在这种情况下请帮帮我。

services.ts文件。

emplLoginCheckUrl = this.baseUrl+"/checkValidUser";

我试图从environment.ts文件中更改基本url，它工作正常，但在保存文件后，我不想保存文件，它应该自动更改。

.service.ts文件。

emplLoginCheckUrl = this.baseUrl+"/checkValidUser";
validateUserDetails(employeeDetails): Observable<any> {
console.log(this.baseUrl);
return this._httpClinet.post(this.emplLoginCheckUrl, employeeDetails);
}

environment.ts文件。

export const environment = {
production: false,
baseUrl: "http://rest/somerestservice"
};

预期：

URL应该自动更改，而不需要一次又一次地保存/运行/编译/构建，因为只有一次我可以在托管时保存/运行、编译/构建。托管后，如果我想更改URL，我不能去那里，更改路径，也不能再次编译它。

Answer 1

第一次访问应用程序时，可以将端点作为查询参数传入，如下所示：

http://localhost/yourapplication?baseUrl=http://rest/somerestservice

然后在app.component.ts中读取此查询参数值，并将其设置为baseUrl环境变量。

小心，尽管这会奏效，但我不知道这是否是实现这一目标的最优雅的方式。

更新：按OP要求编码

演示：https://angular-sku9xx.stackblitz.io/?baseUrl=http://rest/somerestservice

演示代码：https://stackblitz.com/edit/angular-sku9xx?file=src/app/app.component.ts

Answer 2

这是Angular应用程序的常见场景
也就是说，如果你想更改后端api url，你不想在服务器上再次构建和编译代码。以下是我在Angular项目中使用的方法。

方法：

1。在assets文件夹中创建一个config.json文件，因为服务器上存在assets文件夹。

{  // ---------- config.json---------
"serviceUrl": "http://172.168.1.190:1393/"
}

2.在constants文件中创建一个变量serviceUrl，因为角度应用程序将有一个常量文件。指定此变量empty值，因为此变量稍后将保持更新的服务url。

export class AppConstants { 
public static xhr = {
url: {
serviceUrl: ''  // <===== empty value
}
}
}

3.实现APP_INITIALIZER以在应用程序启动时读取config.json文件。并从config.json读取serviceUrl的值，并将该值分配给constants文件中存在的相同变量。

{   // in app.module.ts providers
provide: APP_INITIALIZER,
useFactory: ConfigurationServiceFactory,
deps: [ConfigService],
multi: true
}
---------------------------------------------------
// ConfigurationServiceFactory which is used at App initialization
export function ConfigurationServiceFactory(configService: ConfigService) {
return () => configService.load();
};
---------------------------------------------------
// this method is called at application start up
// and config.json file is read here, and the service url from
// constant file is replaced by the value provided in the assets's config.json
load() {
const configUrl = '~/../assets/config.json';
return new Promise((resolve) => {
this.http.get(configUrl)
.toPromise()
.then((config: any) => {
this.config = config;
console.log('Configurationd fetched  : ', this.config);
//----- variable is updated now with new value from the file -------
AppConstants.xhr.url.serviceUrl = this.config.serviceUrl;
resolve(true);
})
.catch( (err) => console.log(err));
});
}

4. 对于每个HTTP调用，使用constants文件的serviceUrl作为基本url。

   this.http.get('${AppConstants.xhr.url.serviceUrl}api/roles/list')

5. 由于assets文件夹中不断变化的变量值config.json将在启动时提取，并将替换常量文件变量，我们将使用该变量进行api调用。

带有config.json文件的应用程序初始化程序代码(供参考)

Answer 3

这基本上就是；众所周知的文件"；图案它是web服务器上公开配置信息的路径。应用程序在引导时必须通过HTTP请求获取实时配置，并且可以通过重新获取数据来刷新配置。

https://ma.ttias.be/well-known-directory-webservers-aka-rfc-5785/

它基于IETF RFC:

https://www.rfc-editor.org/rfc/rfc5785