Angular – TS2416: Property ‘canActivate’ in type ‘MyGuard’ is not assignable to the same property in base type ‘CanActivate’

angularangular2-routingtypescript

I have written an angular 4.3.0 typescript library. While building my library I saw below error in *.d.ts file.

ERROR in [at-loader] ..\myLibrary\lib-commonjs\my-guard.service.d.ts:13:5
TS2416: Property 'canActivate' in type 'MyGuard' is not assignable to the same property in base type 'CanActivate'.
Type '(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | Promise | Observ…' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | Observable | Pr…'.
Type 'boolean | Promise | Observable' is not assignable to type 'boolean | Observable | Promise'.
Type 'Observable' is not assignable to type 'boolean | Observable | Promise'.
Type 'Observable' is not assignable to type 'Promise'.
Property '[Symbol.toStringTag]' is missing in type 'Observable'.

This is how my guard looks like

  @Injectable()
    export class MyGuard implements CanActivate {
         canActivate( next: ActivatedRouteSnapshot ,state: RouterStateSnapshot):  Observable<boolean> | Promise<boolean> | boolean  {
return true;
        }
    }

The error goes away after I removed the return type (Observable | Promise | boolean ) from canActivate. I want to understand why I need to remove it to make it work.

 canActivate( next: ActivatedRouteSnapshot ,state: RouterStateSnapshot)  {
    }

Error

Best Answer

The error you are facing is because you copied the code that is for a different version of Angular than what you are using.

The error went away when you removed the return value because you made the function compatible with the version you have on your machine.

You can check the function signature at your current version by navigating to CanActivate on your machine. If you are using Visual Studio Code, you can press Ctrl and click on it to navigate to its file.

Related Topic