Angular guards not working in the routing of pages

Question

I'm working in the login of an app and I've created 2 guards for the routing of pages that should go after and before the login. The method I'm calling inside the CanActivate throws exactly what I want. true if the access_token exists and false if it doesn't. The problem is I'm not being redirected to the pages I want even if I'm logged in.

This is the error i'm getting:

ERROR Error: Uncaught (in promise): Error: Invalid CanActivate guard Error: Invalid CanActivate guard

Guard for things that go after that go before the login:

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router/src/utils/preactivation';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { TokenService } from './token.service';

@Injectable({
  providedIn: 'root'
})
export class BeforeLoginService implements CanActivate {
  path: ActivatedRouteSnapshot[];
  route: ActivatedRouteSnapshot;


  CanActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    console.log(this.Token.loggedIn());
    return this.Token.loggedIn();
  }

  constructor(private Token: TokenService) { }
}

Guard for things that go after the login:

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router/src/utils/preactivation';
import { TokenService } from './token.service';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AfterLoginService implements CanActivate {
  path: ActivatedRouteSnapshot[];
  route: ActivatedRouteSnapshot;


  CanActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    console.log(this.Token.loggedIn());
    return !this.Token.loggedIn();
  }

  constructor(private Token: TokenService) { }
}

my routing module for this part of the business:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { UserBaseComponent } from './users/components/user-base/user-base.component';
import { StaffBaseComponent } from './staffs/components/staff-base/staff-base.component';
import { IndexComponent } from './index/index.component';
import { LoginComponent } from '../core/components/login/login.component';
import { AfterLoginService } from '../core/services/after-login.service';
import { BeforeLoginService} from '../core/services/before-login.service';

const routes: Routes = [
  {
    path: 'administration',
    component: IndexComponent,
    children: [
      {path: 'users', component: UserBaseComponent, canActivate: [AfterLoginService]},
      {path: 'staffs', component: StaffBaseComponent, canActivate: [AfterLoginService]}
    ],
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

And I already made sure that the guards are included in the providers.

Answer 1

There are several mistakes that you have correct

1. Correct import statement

   import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
   

2. Also change casing in canActivate

3. And for redirection to be happen to /login page, you have to redirect to /login page manually using router navigate method. Redirection wouldn't happen automagically.

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
      const isLogin = this.Token.loggedIn();
      if (!isLogin) this.router.navigate(['/login']) 
      return isLogin;
   }