Redirect to a different component inside @CanActivate in Angular2

Question

Is there any way we can redirect to a different component from @CanActivate in Angular2 ?

Answer 1

As of Angular 7.1, you can return UrlTree instead of boolean:

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) { }

  canActivate(): boolean | UrlTree {
    return this.authService.isAuthenticated() || this.router.createUrlTree(['/login']);
  }
}