How to fix error TS2416: Property 'canActivate' in type 'KeycloakAuthGuard' is not assignable to the same property in base type 'CanActivate'?

I am very new to the angular project. After I clone the project and try to up the project with ng serve.

So I am getting an error like.

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>'.

If I navigate to keycloak-auth-guard.d.ts, Code is like,

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>;
}

Any help from here?

Thanks, Dasun.

Considering you tagged angular6, I suggest you upgrade to the latest supported angular version by KeyCloack. As mentioned here you can and probably should upgrade to angular 12: