title: Angular AuthGuard canActivate with observable from promise not working
body: <p>I'm trying to guard the admin panel in Angular so that only admin users can access it. While creating the admin AuthGuard I ran into a problem where the AuthGuard doesn't seem to work when the logic is a little bit more complex than just &quot;is the user logged in?&quot;.</p>
  <p>Instead of the expected redirect I get an empty white screen.</p>
  <p>I've been banging my head agains the wall for the past couple of hours trying to find the root cause and it seems to get stuck at this line: <code>const user = await this.firebaseAuth.user.toPromise();</code> but I don't understand why.</p>
  <p>Can someone guide me in the right direction because I seem to be lost in the jungle of Angular and Observables?</p>
  <p>The AuthGuard canActivate method:</p>
  <pre><code>canActivate(
      next: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable&lt;boolean&gt; {
      return this.accountDataService.userIsAdmin().pipe(
        take(1),
        map((admin) =&gt; {
          console.log(admin);
  
          if (admin) {
            return true;
          }
  
          this.router.navigate(['/aanmelden']);
          return false;
        })
      );
    }
  </code></pre>
  <p>This is the dataService:</p>
  <pre><code>userIsAdmin(): Observable&lt;boolean&gt; {
      return from(
        new Promise&lt;boolean&gt;(async (resolve) =&gt; {
          const user = await this.firebaseAuth.user.toPromise();
  
          if (user === undefined) {
            resolve(false);
          }
  
          const result = await user.getIdTokenResult();
          const admin = result.claims.admin;
  
          if (admin === undefined || admin === null || admin === false) {
            resolve(false);
          }
  
          resolve(true);
        })
      );
    }
  </code></pre>