In my Angular Resolver, I am facing a scenario where I need to wait for two server calls. The catch is that the second server call is optional and can be skipped based on user input. This data retrieval process is crucial for loading the next page seamlessly.
The problem lies in my zip function as it fails to reach the pipe section, which results in me being stuck in the resolver. Here's the step-by-step procedure:
Combine the requests using zip
Process them through a pipe
Return an observable to the resolve function
Below is the snippet of my code:
public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
Observable<any> | Promise<any> { //
const id = +route.paramMap.get('id');
const wantsSecondRequest = +route.paramMap.get('wantsSecondRequest');
const requests: Array<Observable<any>> = new Array();
requests.push(firstServerCallHappensHere());
if (wantsSecondRequest === 1) {
requests.push(secondServerCallHappensHere());
}
return zip(requests).pipe(take(1), mergeMap(([a, b]) => {
// PROCESS THE REQUESTS ACCORDINGLY
return of(a);
}));
}
I have experimented with Promise.all and used Promises instead of Observables in the past, but encountered a roadblock when handling errors. With Promises, I couldn't prevent them from completing abruptly in case of an error, leading to undesired navigations.