Uncaught (in promise): Error: Invalid CanActivate guard

Question

Im newbee for angular 7 and now trying to implement CanActive, but im getting error :

Can anyone guide me to overcome this. My code samples are as follows :

auth.guard.ts :

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth-service.service';
import {Router} from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService,
              private myRoute: Router){
  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.auth.isLoggednIn()){
      return true;
    } else {
      this.myRoute.navigate(["login"]);
      return false;
    }
  }
}

Answer 1

Using a promise in an if condition is always a bad idea, since it does not get resolved. You could return the promise itself, using resolve to pass the resulting boolean further down the line:

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Promise<boolean> | boolean {
   return new Promise(resolve =>
     this.auth.isLoggednIn()
       .then(status: boolean => {
         if(status === false) {
           this.myRoute.navigate(["login"]);
         }
         resolve(status);
       })
       .catch(() => {
         this.myRoute.navigate(["login"]);
         resolve(false);
         // ... or any other way you want to handle such error case
       })
  }
}

Answer 2

Please try this:

   return this.auth.isLoggednIn() ? true : this.myRoute.navigate(["login"]);

I got the SAME error message when I did the following:

   canDeactivate(component: CreateEmployeeComponent): boolean {
        if(component.createEmployeeForm.dirty) {
           return confirm('Are you sure you want to discard your changes?');
        }
        return true;
   }

So I solved the problem in the following way:

    canDeactivate(component: CreateEmployeeComponent): boolean {
         return component.createEmployeeForm.dirty 
                ? confirm('Are you sure you want to discard your changes?') 
                : true;    
    }

I'm not sure it works for you, but you can at least give it a try.

Answer 3

I just got this same error.

The reason I got this was I had declared (in my routing module app-routing.module.ts) my guard to be canLoad but later on I changed the method (in guard file) to CanActivate, so naturally Angular got confused.

Answer 4

Check that the class given into routes (in this case MyGuardClass) {path: 'aPath', component: myComponent, canActivate: [MyGuardClass]} implements CanActivate as documented here