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))
     );
   }
}
0

There are 0 answers