title: Angular 9 Router - CanActivate not working with redirects
body: <p>The use case: I want to redirect logged in users to /dashboard, and non-logged in users to /landing.</p>
  
  <p>First take:</p>
  
  <pre><code>  {
      path: '**',
      redirectTo: '/dashboard',
      canActivate: [AuthGuard],
    },
    {
      path: '**',
      redirectTo: '/landing'
    }
  </code></pre>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class AuthGuard implements CanActivate {
  
    constructor(private auth: AuthService, private router: Router) {}
  
    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;boolean|UrlTree&gt; | Promise&lt;boolean|UrlTree&gt; | boolean | UrlTree {
      return this.auth.isAuthenticated$
    }
  }
  </code></pre>
  
  <p>All users are redirected to the dashboard page.</p>
  
  <p>Second try:</p>
  
  <pre><code>  {
      path: '**',
      redirectTo: '/home/loggedin',
      canActivate: [AuthGuard],
      data: { authGuard: { redirect: '/home/loggedout' } }
    },
    {
      path: '**',
      redirectTo: '/home/loggedin'
    }
  </code></pre>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class AuthGuard implements CanActivate {
  
    constructor(private auth: AuthService, private router: Router) {}
  
    canActivate(
      next: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable&lt;boolean|UrlTree&gt; | Promise&lt;boolean|UrlTree&gt; | boolean | UrlTree {
      return this.auth.isAuthenticated$.pipe(
        map(loggedIn =&gt; {
          console.log(`A=${loggedIn} ${JSON.stringify(next.data.authGuard.redirect)}`)
          if (!loggedIn &amp;&amp; next.data.authGuard.redirect) {
            return this.router.parseUrl(next.data.authGuard.redirect);
          } else {
            return false;
          }
        })
      );
    }
  }
  
  </code></pre>
  
  <p>Seems like the AuthGuard is not even invoked. Possibly if I use a component instead of a redirect?</p>
  
  <pre><code>  {
      path: '**',
      component: RedirectingComponent,
      canActivate: [AuthGuard],
      data: { authGuard: { redirect: '/home/loggedout' }, redirectComponent: { redirect: '/home/loggedin' } }
    }
  </code></pre>
  
  <p>Now this seems to work, but it also is an awful hack.</p>
  
  <p>How can AuthGuards be made to work with redirects?</p>