can activate route guard angular cannot satisfy interface while executing logic

Question

I have the following can activate route guard class

import {OnDestroy } from '@angular/core';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router
} from '@angular/router';
import {Injectable} from '@angular/core';
import {UserAuthorizationService} from "../userauthorizationservice/userauthorizationservice";


@Injectable()
export class ClientSuitsUserGuard implements CanActivate, OnDestroy{
  constructor(private userservice: UserAuthorizationService, private router: Router){}
  userservicesubscription;
  user ={
    id: null,
    isclient: false,
    issuitsviewer: false,
    issuitsadministrator: false,
    issuitssuperuser: false,
    isvenueuser: false

  };

  canActivate(route: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): boolean{

    this.userservicesubscription = this.userservice.receiveuser()
      .subscribe(
        (req: any)=>{
          if(req != null){
            this.user = req;
            if(this.user.isclient || this.user.issuitsviewer || this.user.issuitssuperuser || this.user.issuitsadministrator){
              return true;
            }
            if(this.user == null ){
              this.router.navigate(['/signin']);
              return false;
            }else{
              this.router.navigate(['/401']);
              return false;
            }
          }
          this.router.navigate(['/signin']);
          return false;
        }
      );
  }

  ngOnDestroy(){
    this.userservicesubscription.unsubscribe();
  }
}

And I keep getting the error:

ERROR in /home/rickus/Documents/softwareProjects/211hospitality/suitsandtables/frontend/suitsandtables/src/app/services/userservice/authguardservices/isclientuserguard.ts (31,44): A function whose declared type is neither 'void' nor 'any' must return a value.

I want the route guard to receive the user permission check if attributes are true or not and redirect to pages depending on if conditions are false or true.

I feel like my code is correct and this is an interface issue. Is there any quick tweeks I can do to satisfy the interface?

What am I doing wrong?

I have made the following edits based on the answer below but I am now having to deal with a new error because of it.

canActivate(route: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): Observable<boolean>{

    return this.userservicesubscription = this.userservice.receiveuser()
      .map(
        (req: any)=>{
          if(req != null){
            this.user = req;
            if(this.user.isclient || this.user.issuitsviewer || this.user.issuitssuperuser || this.user.issuitsadministrator){
              return true;
            }
            if(this.user == null ){
              this.router.navigate(['/signin']);
              return false;
            }else{
              this.router.navigate(['/401']);
              return false;
            }
          }
          this.router.navigate(['/signin']);
          return false;
        }
      );
  }

with the new error at run time:

ERROR Error: Uncaught (in promise): TypeError: this.userservice.receiveuser(...).map is not a function
TypeError: this.userservice.receiveuser(...).map is not a function

Answer 1

As stated in my comment above:

Your return statements in the subscribe method is not returning values for your canActivate method. Instead of subscribing, you'll want to use the map method and return that observable chain (updating the return result to be an Observable).

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.userservice.receiveuser().map(
    (req: any)=>{
      if(req != null){
        this.user = req;
        if(this.user.isclient || this.user.issuitsviewer || this.user.issuitssuperuser || this.user.issuitsadministrator){
          return true;
        }
        if(this.user == null ){
          this.router.navigate(['/signin']);
          return false;
        }else{
          this.router.navigate(['/401']);
          return false;
        }
      }
      this.router.navigate(['/signin']);
      return false;
    }
  );
}