Angular Http call in CanActivate getting cancelled

Question

I'm trying to create an guard to verify the token via HTTP call as CanActivate accepts return types as Observable.

Though the HTTP request is hitting the backend (logs and db calls) still in front end it shows as cancelled(when i'm manually subscribing to it i'm getting the data but when i'm returning as Observable the request is getting cancelled).

Below is my code:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    if (this.isTokenPresent(route)) {
        return this.validateToken(route).pipe(map((e: any) => {
                console.log(e);
                return true;
            }),
            catchError((err) => {
                return of(false);
            }));
    } else {
        return false;
    }
}

private validateToken(route: ActivatedRouteSnapshot) {
    return this.httpClient.get(this.Url + "/v1/tax/verify?token=" + route.queryParams.token, {responseType: 'text' as 'json'})
}