rxjs: returning value with pipe(map)

Question

How to return value when using pipe and map, like in this scenario:

return this.service.someEvent().pipe(
  map(x => {
    return this.service.someValue;
  })
)

but the value is never returned since never subscrubed to the event, if i use it like this:

const a = this.service.someEvent().pipe(
  map(x => {
    return this.service.someValue;
  })
)

return a.subscribe();

i get an error (i know this is wrong).

TS2322: Type 'Subscription' is not assignable to type 'boolean | Observable<boolean> | Promise<boolean>'.   Type 'Subscription' is not assignable to type 'Promise<boolean>'.     Property 'then' is missing in type 'Subscription'.

So i need i way to return the value.

UPDATE: the better description (i need to duplicate this code with the latest version of rxjs):

canActivate(next: ActivatedRouteSnapshot,
               state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  return this.service.something().map(x => {
    if (x) {
      return true;
    } else {
      return false;
    }
  })

}

need to do it with map inside pipe (as i understood).

Solution

You can simply return the observable itself from the "canActivate" guard :-

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  return this.service.something().pipe(map(x => {
    if (x) {
      return true;
    } else {
      return false;
    }
  }));
}

Routing will proceed only after the returned observable is complete and its emitted value is true. So you don't actually have to worry about subscribing to that observable angular router will handle it of its own.

Comments

[bersling]

is it really when the observable is complete or is it when the observable receives its next value? I think it's the latter?