如何修复错误 TS2416：类型 'KeycloakAuthGuard' 中的 属性 'canActivate' 无法分配给基本类型 'CanActivate' 中的相同 属性？

Question

我是 angular 项目的新手。在我克隆项目并尝试使用 ng serve.

启动项目之后

所以我收到类似这样的错误。

ERROR in node_modules/keycloak-angular/lib/core/services/keycloak-auth-guard.d.ts(10,5): error TS2416: Property 'canActivate' in type 'KeycloakAuthGuard' is not assignable to the same property in base type 'CanActivate'. 
  Type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => Promise<boolean | UrlTree>' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | Promise<boolean> | Obser...'.
    Type 'Promise<boolean | UrlTree>' is not assignable to type 'boolean | Promise<boolean> | Observable<boolean>'.
      Type 'Promise<boolean | UrlTree>' is not assignable to type 'Observable<boolean>'.
        Property '_isScalar' is missing in type 'Promise<boolean | UrlTree>'.

如果我导航到 keycloak-auth-guard.d.ts，代码就像，

import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { KeycloakService } from './keycloak.service';
export declare abstract class KeycloakAuthGuard implements CanActivate {
    protected router: Router;
    protected keycloakAngular: KeycloakService;
    protected authenticated: boolean;
    protected roles: string[];
    constructor(router: Router, keycloakAngular: KeycloakService);
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean | UrlTree>;
    abstract isAccessAllowed(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean | UrlTree>;
}

这里有什么帮助吗？

谢谢， 大孙.

Answer 1

考虑到您标记了 angular6，我建议您通过 KeyCloack 升级到支持的最新 angular 版本。如前所述 here 你可以而且可能应该升级到 angular 12: