Angular Guard - how to make canActivate wait for a value?

Question

I have a guard that depends on a client. The guard isn't working as expected because the client is not ready by the time the guard is hit. How do I get the guard to wait until the client is ready?

public canActivate() {
   if (this.ffService.getFlag(FLAG)) {
      // KEEPS HITTING HERE BECAUSE CLIENT IS NOT READY
      return observableOf(true);
   }

   // NEEDS TO MAKE IT TO THE LOGIC BELOW HERE
}

In the feature flag service:

getFlag(flag) {
   if (!this.ffClient.isReady()) {
       // KEEPS HITTING HERE
       return false;
   }
   return this.ffClient.find(flag);
}

I have tried adding retry logic to the keep checking if the isReady(), but it's just making the guard not load anything.

Answer 1

Try this:

public canActivate(): Observable<boolean> {
   return this.ffservice.getFlag(FLAG).pipe(
     filter(flag => flag), // will only pass if flag exists and(or if it's an obj) it's true
     mapTo(true)
   );
}