title: load data in ngrx effect with dispatch an action before using route guard
body: <p>My auth is based on <strong>NGRX</strong>
  so when the page starts loading  I got all roles and
  then get logged in.</p>
  <p>but when I start using route guard,
  route gourd start working before user data get loading</p>
  <p>how can I wait for user load action to be done then start using <strong>canActivate</strong>
  I try below solution but it's not working</p>
  <pre><code>export class AuthGuard implements CanActivate, OnDestroy {
  private unsubscribe: Subject&lt;any&gt;;
  
  constructor(private store: Store&lt;AppState&gt;, private router: Router,
    private alertService: ToastrService, private authService: AuthService) {
    this.unsubscribe = new Subject();
  }
  ngOnDestroy(): void {
    this.unsubscribe.next();
    this.unsubscribe.complete();
  }
  getFromStoreOrAPI(): Observable&lt;any&gt; {
    return this.store.pipe(
      select(isUserLoaded),
      tap((data: boolean) =&gt; {
        if (!data) {
          this.store.dispatch(new UserRequested());
        }
      }),
      take(1)
    );
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;boolean&gt; {
  
    return this.getFromStoreOrAPI().pipe(
      switchMap(() =&gt;
        this.store.pipe(
          select(isLoggedIn),
          map(loggedIn =&gt; {
            if (!loggedIn) {
              this.router.navigateByUrl('/auth/login');
              return false;
            } else {
              this.store.pipe(
                select(currentUserRoles),
                map((userRoles: Role[]) =&gt; {
                  //.......
                }),
                takeUntil(this.unsubscribe)
              ).subscribe();
            }
          }),
        )
      ),
      catchError(() =&gt; this.router.navigateByUrl('/auth/login'))
    );
  }
  
  }
  </code></pre>