I am having an issue with my canActivateChild route guard not waiting for data to come back from 3 service calls to the backend before determining whether it can activate the route or not. I have it hooked into the ngRx store and am dispatching 3 separate actions, and then using forkJoin to return what I thought would be an Observable as to whether they all return data or not. This doesn't seem to be working properly because one of the 3 usually returns undefined in the component.
As far as I understand the select returns an observable and the filter/take(1) ensures the observable completes once the condition is met. This seems to be working properly as it hits multiple times in the filter, eventually having data for 2 of them. I don't understand why it would return true if one of the items returns no data.
Any help as to how to get this working properly?
getFromStoreOrAPI(): Observable<any> {
return forkJoin(
this.store.select(getFinancialFactors).pipe(filter(financialFactors => financialFactors && financialFactors.length > 0), take(1)),
this.store.select(getFinancialData).pipe(filter(financialData => financialData && financialData.length > 0),take(1)),
this.store.select(getFranchiseData).pipe(filter(franchiseData => franchiseData && franchiseData.length > 0),take(1))
);
}
canActivateChild(route: ActivatedRouteSnapshot): Observable<boolean> | boolean {
let tranId = this.router.getCurrentNavigation().extras.state.tranId;
let modelId = this.outer.getCurrentNavigation().extras.state.modelId;
this.store.dispatch(ScorecardActions.loadFinancialData({tranId: tranId}));
this.store.dispatch(ScorecardActions.loadFranchiseData({tranId: tranId}));
this.store.dispatch(ScorecardActions.loadFinancialFactors({modelId: modelId}));
return this.getFromStoreOrAPI()
.pipe(
switchMap(() => of(true)),
catchError(() => of(false))
);
}
}