canActivate returning Promise or Observable blocks Change detection

Question

When I add canActivate that returns either an Observable or Promise (in this case a promise) the routing works correctly but it seems to block things like (click) events, pipes don't work correctly, etc... These functions all work as soon as I make canActivate just return true. Any suggestions?

canActivate

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):  Observable<boolean> | boolean | Promise<boolean> {
return Stamplay.User.currentUser()
  .then((res) => {
    if (res.user) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }).catch(() => {
      this.router.navigate(['/login']);
      return false;
    });

For example, the material search doesn't work with canActivate, but works perfectly when I just return true or take canActivate out.

Then you can try returning a resolved promise ! instead of returning true or false, return `Promise.resolve(true)` and `Promise.reject(false)` — , Jun 09 '17 at 12:34
@trichetriche Thanks, that worked! I think it would be helpful for others, so if you make an answer I can mark it correct. — Chris Fowles, Jun 09 '17 at 12:50

score 2 · Accepted Answer · answered Jun 09 '17 at 12:55

2

Following my comment, return Promise.resolve(true) and Promise.reject(false) instead of returning true and false.

answered Jun 09 '17 at 12:55

canActivate returning Promise or Observable blocks Change detection

1 Answers1