Angular5 canactivate guard :Types of property 'canActivate' are incompatible

Question

I am trying to implement simple canActivate in my Auth service

import {CanActivate,ActivatedRouteSnapshot} from '@angular/router';
export class Auth implements CanActivate{
    canActivate(
        next: ActivatedRouteSnapshot,
        state: ActivatedRouteSnapshot
      ): Observable<boolean> {

            return Observable.of(true);
      }
}

got this error

ERROR in src/app/modules/user/auth.ts(13,14): error TS2420: Class 'Auth' incorrectly implements interface 'CanActivate'. Types of property 'canActivate' are incompatible. Type '(next: ActivatedRouteSnapshot, state: ActivatedRouteSnapshot) => Observable' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | Promise | Obser...'. Types of parameters 'state' and 'state' are incompatible. Type 'RouterStateSnapshot' is not assignable to type 'ActivatedRouteSnapshot'. Types of property 'url' are incompatible. Type 'string' is not assignable to type 'UrlSegment[]'.

aspnet82 aspnet82 · Accepted Answer · 2018-03-01T06:42:08

I think the problem is the declaration of state: should be RouterStateSnapshot

interface CanActivate { 
   canActivate(route: ActivatedRouteSnapshot, 
               state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean
}

Angular5 canactivate guard :Types of property 'canActivate' are incompatible

2 Answers