Property 'canActivate' in type 'AuthGuardService' is not assignable to the same property in base type 'CanActivate'

Issue

Property 'canActivate' in type 'AuthGuardService' is not assignable to the same property in base type 'CanActivate'

export class AuthGuardService implements CanActivate {
  constructor(public authService: AuthService, public router: Router) {}
  async canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    Promise<boolean | UrlTree | Observable<boolean | UrlTree>> {
    if (!await this.authService.chechAuthenticated()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}

giving error:

Property 'canActivate' in type 'AuthGuardService' is not assignable to the same property in base type 'CanActivate'.

Solution

you can't change the signature using async, instead you can write a function in which it awaits the result and returns true or false, you can then call this function from canactivate.

export class AuthGuardService implements CanActivate {
   constructor(public authService: AuthService, public router: Router) {}
   canActivate(
       route: ActivatedRouteSnapshot,
       state: RouterStateSnapshot
   ){
        if(!isAuthenticated())
           this.router.navigate(['login']);
           return false;
        }
        return true;
   }
   async isAuthenticated() : bool {
      return Promise<boolean | UrlTree | Observable<boolean | UrlTree>> {
           return await this.authService.chechAuthenticated();
      }
   }

}

You can do something like this, please note that the above code is for getting an idea only, this is not tested, may contain compilation issues.

Answered By - Vilsad P P