I am trying to load content from files in an assets folder using Angulars HttpClientModule. However it looks like when the WebService.webCall method is run, everything in the method runs in the wrong order. I have created a stackblitz code sample here to demonstrate the issue I am having, https://stackblitz.com/edit/angular-avuhul.
The code works 100% as it should, except for the methods returning with empty strings and a little bit later the data from the file gets loaded, but its always after the method is already returned, too late for me to do any logic on the contents of the file.
I am not sure what is causing this and everywhere I look in stackoverflow I see references to older versions of Angular. I assume this is why those solutions didn't work with my problem.
will the previous answer meant to solve the problem by return an observable and subscribe at the component level and move any next step to the subscribe body when the data available, async/await can do the same result but without that much of changes
WebService
just convert the observable to promise and change the return type
getConfigFile(url: string): Promise<string> {
return this.webGet(url, "[1] - ");
}
getContentsFile(url: string): Promise<string> {
return this.webGet(url, "[2] - ");
}
webGet(url: string, prefix: string): Promise<string> {
//log the start of the web call
this.log(prefix + "(001) run webGet [" + url + "]");
//create the headers
const headers = new HttpHeaders().set(
"Content-Type", "text/plain; charset=utf-8"
);
//create the result
var result: string = "";
// 👇 run the http Get method
return this.http.get(url, { headers, responseType: "text" }).toPromise();
}
component
just prefix reloadConfig and reloadFile with async keyword , and prefix getContentsFile , getConfigFile with await keyword
// 👇 web call method
async reloadConfig() {
console.clear();
console.log("===================");
// 👇 testing with a config json file
this.config = await this._web.getConfigFile("/assets/config.json");
this.log("loaded config data: " + this.config);
//check if the file loaded
if (this.config.length > 0){
//apply some logic to the config file
this.modified = "config file contains [" + this.config.length + "] chars";
} else {
this.log("config data is empty");
}
}
//👇 web call method
async reloadFile() {
console.clear();
console.log("===================");
// 👇 testing with a blank file containing text
this.contents = await this._web.getContentsFile("/assets/filewithcontents");
this.log("loaded contents data: " + this.config);
//check if the file loaded
if (this.contents.length > 0){
//apply some logic to the config file
this.modified = "contents file contains [" + this.contents.length + "] chars";
} else {
this.log("contents data is empty");
}
}