canActivate always taking to login form in Angular?

Question

I am new to angular. I am using canActivate guard but when I apply it to the route, it always takes me to the login page despite the guard returning true.

Please help.

guard code:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private routes: Router) { }
  canActivate(
    
    alert('blocked');
    return true;
  }
}

Route:

{
    path: 'list',
    component: BatchListComponent, 
    canActivate: [AuthGuard],
  },

Answer 1

Interface that a class can implement to be a guard deciding if a route can be activated. If all guards return true, navigation continues. If any guard returns false, navigation is cancelled. If any guard returns a UrlTree, the current navigation is cancelled and a new navigation begins to the UrlTree returned from the guard.

You're auth logic is not correct and it would be better to not return anything right now till you are prepared to do so. Otherwise it will continually fail.

https://angular.io/api/router/CanActivate