TS2416: Property 'canActivate' in type 'MyGuard' is not assignable to the same property in base type 'CanActivate'

6
votes

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

6
angulartypescriptangular2-routing
If you remove it then TypeScript will infer the return type based on your return statements. I'm assuming you are returning one of those three types so the return type would be that single type which will match the return signature of the interface. – Daniel W Strimpel
Which version of typescript are you using? I just tried with v 2.5.3 and it works correctly (on angular 5 though, but the interface has not canged since) – David
@David - I am using typescript version 2.7.2 – user911
do you add your guard in main module, section providers?, it's solve my issues – kamiyar

6 Answers

8
votes

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.

1
votes

@user911 - I recently started learning angular and fortunately came up with the same issue.

The reason for the error would probably be that your IDE accidentally imported Promise from 'q' import {Promise} from 'q'; remove this and you can even declare the return type of the canActivate method which is Observable< boolean> | Promise< boolean> | boolean.

The import is the only reason for which your app works fine when you remove the return type of the canActivate method.

Try this for better understanding:

  1. Make sure you define the return type of the canActivate method and while defining the type let IDE automatically import the Promise from q or import it manually.

  2. As we expect there will be error and now remove Promise< boolean> from the return type and the error should go away unless you are returning a promise with your canActivate method.

0
votes

The problem is in the returned types. This works for me:

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | 
boolean | UrlTree {

}
0
votes

Change this (: Observable<boolean> | Promise<boolean> | boolean ) to :any would definitely work for you

0
votes

What fixed it for me, was an import mismatch issue.

I created an interface and implemented it in a class.
In the class I imported the correct module, but I didn't do the same in the interface declaration.
That caused the compiler to yell at me, and took me some time to realize it was because of the imports, the typescript compiler doesn't mention it.

-3
votes

For me, I put in the return type Observable< Boolean> | Promise< Boolean> | Boolean isntead of Observable< boolean> | Promise< boolean> | boolean. When I replace it works.