title: Angular - How to make canActivate to await for promise response?
body: <p>I try to check in CanActivate gurad if user is logged in.<br />
  If yes, then I navigate him to some page.<br />
  If not, then I navigate him to login page.<br />
  I use promise.<br /></p>
  
  <p>I have a service named <strong>LoginService</strong>:</p>
  
  <pre><code>export class LoginService {
  
    urlcheck = 'http://localhost:80/isconnected.php';
    resultCheck;
  
    constructor(private http: HttpClient, private router: Router)
    {
    }
  
    async checkLogin()
    {
      const x = await this.updateConnectedState();
      return x;
    }
  
    updateConnectedState()
    {
      //formData here...
      return this.http.post(this.urlcheck, formData).toPromise()
        .then(
          (response) =&gt;
          {
            this.resultCheck = response; 
            console.log(response);
            return this.resultCheck.state; //state is true/false
          },
          (error) =&gt; 
          { 
              console.log(error); 
              return false;  
          }
        );
      }
    }
  </code></pre>
  
  <p><br /><strong>the canActivate Gurad:</strong></p>
  
  <pre><code>export class BackHomeGuardService implements CanActivate
  {
    constructor(private logService: LoginService, private router: Router)
    {
    }
  
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;boolean&gt;|boolean
    {
      const result = this.logService.checkLogin();
      console.log( result);
  
      if (result)
      {
        console.log('true');
        // navigate to hom page
        return true;
      }
      else
      {
        console.log('false');
        // navigate to login page
        return false;
      }
    }
  }
  </code></pre>
  
  <p>The guard canActivate function always return true.<br />
  I checked in console and the the promise result is:</p>
  
  <pre><code>__zone_symbol__state: null
  __zone_symbol__value: []
  </code></pre>
  
  <p>I want to make the canActive await for result before it will do something.<br />
  What if my backend (php code file) will take 30 seconds to be completed?<br />
  I need a solution. Thanks.</p>