title: Use tap() instead of map() RxJS and Angular
body: <p>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:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      return this.store.select(fromApp.isAuthenticated)
          .pipe(take(1),
              map(isAuthenticated =&gt; {
                  if (isAuthenticated) {
                      this.router.navigate(['/home']);
                      return false;
                  } else {
                      return true;
                  }
              })
          )
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      return this.store.select(fromApp.isAuthenticated)
          .pipe(take(1),
     HERE------&gt; tap(isAuthenticated =&gt; {   &lt;------ HERE
                  if (isAuthenticated) {
                      this.router.navigate(['/home']);
                      return false;
                  } else {
                      return true;
                  }
              })
          )
  }
  </code></pre>
  
  <p>Then I went to Chrome, and I saw black page and this was the case:</p>
  
  <ul>
  <li>I open the app</li>
  <li>I'm not logged in</li>
  <li>The url becomes <a href="http://localhost:4200/#/" rel="nofollow noreferrer">http://localhost:4200/#/</a> instead of
  <a href="http://localhost:4200/#/login" rel="nofollow noreferrer">http://localhost:4200/#/login</a>, result: blank page</li>
  <li>If I try to go manually in <a href="http://localhost:4200/#/login" rel="nofollow noreferrer">http://localhost:4200/#/login</a>, it stays in
  that page but I see a blank page</li>
  <li>If I try to go home, it redirects on <a href="http://localhost:4200/#/" rel="nofollow noreferrer">http://localhost:4200/#/</a> instead
  of <a href="http://localhost:4200/#/login" rel="nofollow noreferrer">http://localhost:4200/#/login</a></li>
  </ul>
  
  <p>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?</p>