How To Change Urls Automatically In Services, After Changing Url It Should Affect To All Components Without Saving/ Building/running In Angular6
Solution 1:
You could pass the endpoint in as a query parameter when accessing the application for the first time like this:
http://localhost/yourapplication?baseUrl=http://rest/somerestservice
and then read this query parameter value in your app.component.ts and set it to the baseUrl
environment variable.
Beware even though this would work, I don't know if this would be the most elegant way to achieve this.
Update: As OP requested code
Demo: https://angular-sku9xx.stackblitz.io/?baseUrl=http://rest/somerestservice
Code for the demo: https://stackblitz.com/edit/angular-sku9xx?file=src/app/app.component.ts
Solution 2:
This is a common scenario for the Angular application. That is, you don't want to build and compile again the code on the server, if you want to change backend api url. Following is the approach that i use with my Angular projects.
Approach :
1. Create a config.json
file in the assets
folder, as assets folder is present on the server.
{// ---------- config.json---------"serviceUrl":"http://172.168.1.190:1393/"}
2. Create a variable serviceUrl
in your constants
file, as you will have a constant file for your angular application. Assign this variable empty
value as this variable will keep the updated service url later.
exportclassAppConstants {
publicstatic xhr = {
url: {
serviceUrl: ''// <===== empty value
}
}
}
3. Implement APP_INITIALIZER
to read the config.json
file at the application start up. And read the value of serviceUrl
from config.json
and assign this value to the same variable present in the constants
file.
{ // in app.module.ts providersprovide: APP_INITIALIZER,
useFactory: ConfigurationServiceFactory,
deps: [ConfigService],
multi: true
}
---------------------------------------------------
// ConfigurationServiceFactory which is used at App initializationexportfunctionConfigurationServiceFactory(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.jsonload() {
const configUrl = '~/../assets/config.json';
returnnewPromise((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));
});
}
For every
HTTP
call, use theconstants
file'sserviceUrl
as the base url.this.http.get('${AppConstants.xhr.url.serviceUrl}api/roles/list')
As changing variable value in
assets
folderconfig.json
will be fetched at start up and will replace the constant file variable, which we will be using forapi
calls.
Solution 3:
This is basically the "well known file" pattern. It's a path on a web server that exposes config information. The applications have to fetch the live config via a HTTP request while they are bootstrapping, and can refresh the config by re-fetching the data.
https://ma.ttias.be/well-known-directory-webservers-aka-rfc-5785/
It's based on an IETF RFC:
Post a Comment for "How To Change Urls Automatically In Services, After Changing Url It Should Affect To All Components Without Saving/ Building/running In Angular6"