Use tap() instead of map() RxJS and Angular

panagulis72 picture panagulis72 · Jul 6, 2018 · Viewed 10.4k times · Source

I have a login guard which basically check if the user il logged in. If he is logged, it skips the login and go to home page. I wrote this code, and this works:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select(fromApp.isAuthenticated)
        .pipe(take(1),
            map(isAuthenticated => {
                if (isAuthenticated) {
                    this.router.navigate(['/home']);
                    return false;
                } else {
                    return true;
                }
            })
        )
}

Now, since I don't have to change or edit the output data (isAuthenticated boolean), I thought: well, why don't use tap operator? So, I re-write my code:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select(fromApp.isAuthenticated)
        .pipe(take(1),
   HERE------> tap(isAuthenticated => {   <------ HERE
                if (isAuthenticated) {
                    this.router.navigate(['/home']);
                    return false;
                } else {
                    return true;
                }
            })
        )
}

Then I went to Chrome, and I saw black page and this was the case:

In any case, I see blank page. So, I went in debug and I noticed that it correctly jump inside the if/else block... so, why tap() is breaking the app?

Answer

siva636 picture siva636 · Jul 6, 2018

This is the signature of canActivate:

interface CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean
}

canActivate must either return boolean or Promise. Therefore you must map it and return a boolean or Promise. tap will not do the trick.