I have a Guardian overseeing a specific route. Within the canActivate method, I am trying to perform two HTTP requests, with the second request being dependent on the response of the first one. However, it seems like the second request is not being triggered, possibly due to the nested structure involving returning Observables.
1 canActivate(route: ActivatedRouteSnapshot,
2 state: RouterStateSnapshot) : Observable<boolean>|boolean {
3 return this.provider.getA().map(
4 dataA => {
5 return this.provider.getB().map(
6 dataB => {
7 return (dataB.allowed);
8 }
9 );
}
);
}
Both getA() and getB() functions return data in a similar format:
getA() : Observable<any> {
return this.http.post(URL,payload).
map(response => response.json());
};
This code snippet is simplified, but assume that getA() and getB() are functioning correctly. While getA() is executed over the network when the Guardian is activated, getB() does not seem to be invoked at all. The issue appears to occur silently at line 5 in the debugger.
Additonally, TypeScript gives a warning message which may provide a solution, however, my understanding of Observables is limited for now:
Observable<Observable<boolean>>' is not assignable
to type 'Observable<boolean>'
My assumption is that the Observables within each other are causing the delay in resolution, resulting in an indefinite waiting period without any errors. My simplistic view was that as long as an Observable eventually returns a boolean value (as seen in line 7), the subscriber would interpret it correctly.
Any insights or suggestions are welcome. Time for some rest...