Angular route guard not resolving in subscription

Question

I have a problem related route guard and resolving it via observable but in observable i am trying to call api through ngrx data which provide me redux store so in observable i am trying to subscribing store and with the value of store i am resolving route guard observable. I checked in log it is comming in next function where i assign true value but still it is not geting resolve and page stay at the same state, hear is my code

import { Injectable } from "@angular/core";
import { ActivatedRoute, ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlSegment, UrlTree } from "@angular/router";
import { Observable, Subscription } from "rxjs";
import { PageStateService } from "./page-state.service";
import { GetAuditJobSpecificDetailsService } from "../../audit-dashboard-service/services/audit-get-specific-details.service";
import { BaseModel, QueryModel, RequestModel } from "../../model/base.model";
import { GetAuditJobSpecificDetailsResponseModel } from "apps/audit/src/app/services/audit-dashboard-service/models/audit-dashboard.model";
import { GlobalLoaderStateService } from "./global-loader-state.service";

@Injectable()
export class JobDeleteCheckService implements CanActivate {
  public jobId: any = "";
  public jobDetailSub: Subscription;
  private jobCallFlag: boolean = false;
  constructor(public pageService: PageStateService,
    public jobDetail: GetAuditJobSpecificDetailsService,
    private globalLoaderStateService: GlobalLoaderStateService,
    private activatedRoute: ActivatedRoute,
    public router: Router,) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
    const page = route.data.page;
    return new Observable((obs) => {
      let auditJobId = route.parent.params["id"];
      if (route.data.action === 'reimport') {
        auditJobId = route.parent.parent.params["id"];
      }
      
      if (page == 'job-section' && !state.url.includes("financial-reports") && state.url.includes('/job/')) {
        this.jobDetailSub = this.jobDetail.getEntityResponse().subscribe((data: BaseModel<RequestModel, GetAuditJobSpecificDetailsResponseModel, QueryModel>) => {
      // && parseInt(this.jobId) !== parseInt(auditJobId)
          if (data && data.response) {
            this.globalLoaderStateService.setState({ loader: true });
            this.jobId = data.response.auditJobId;
            if(parseInt(auditJobId) !== this.jobId) {
                this.jobDetail.clearStore();
            } else {
                this.globalLoaderStateService.setState({ loader: false });
                if (data.response.status === "Deleted") {
                    this.router.navigate(['/']);
                    setTimeout(() => {
                        window.location.reload();
                    });
                    obs.next(false);
                } else {
                    obs.next(true);
                }
                if (this.jobDetailSub !== undefined){
                    this.jobCallFlag = false;
                    this.jobDetailSub.unsubscribe();
                }
            }
            
          }
          else {
            if(page == 'job-section' && !state.url.includes("financial-reports") && state.url.includes('/job/')) {
              this.globalLoaderStateService.setState({ loader: true });
              if(!this.jobCallFlag) {
                this.jobDetail.getRequest(true, { auditJobId: auditJobId });
                this.jobCallFlag = true;
              }
              
            }
          } 
        });
      } else {
        this.globalLoaderStateService.setState({ loader: false });
        // obs.next(true);
      }
    });

  }

}

I am expecting to resolve this route but some how it stay in same state