Angular 4 CanActivate guard doesnt load component with used with service; simple Observable.of(true) works

Question

I'm trying to use CanActivate guard in Angular it doesnt work when i call service from it and return true even return Observable.of(true);

But it works and load component when i dont call any service and just write Observable.of(true); in canActivate

Following is the code doenst work :

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    //return Observable.of(true);
    return this._userService.verify().subscribe((result: Array<Object>) => {
        let user : UserDetail = new UserDetail();
        Object.keys(user).forEach(key=>{
             let listValue = result.filter(m=>m["m_type"]==key);
             if(listValue.length>0){
                user[key] =  result.filter(m=>m["m_type"]==key)[0]["m_value"];
             }
        });
        this.userDetails = user;
        return Observable.of(true);
        //return true;
    }, (error: any) => {
        // error when verify so redirect to login page with the return url
        this._router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
        return true;
    }, () => {
        console.log("auth.guard : completed.");
        //return true;
        return Observable.of(true);
    });

Following code works :

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

            return Observable.of(true);
        });

Answer 1

Observable is not promise any return code in subscribe will not work. change code to this.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
//return Observable.of(true);
return this._userService.verify().switchMap((result: Array<Object>) => {
    let user : UserDetail = new UserDetail();
    Object.keys(user).forEach(key=>{
         let listValue = result.filter(m=>m["m_type"]==key);
         if(listValue.length>0){
            user[key] =  result.filter(m=>m["m_type"]==key)[0]["m_value"];
         }
    });
    this.userDetails = user;
    return Observable.of(true);
    //return true;
}).catch(() => {

    // error when verify so redirect to login page with the return url
    this._router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return Observable.of(false);


});

when you do let x = this.observable.subscribe(); x is subscription but not observable.