How do I subscribe in sequence and return only the value from the last observable in RxJS?

Question

I'm in an Angular route resolver and want to return an observable.

I need to subscribe to multiple async processes in order:

A => B(a) => C(b)

C depends on B and B depends on A. A must complete, then B, then C, but I only want the value from C to be used to cause the route to resolve.

I've tried two different approaches:

return A.pipe(
  concatMap(a => 
    B(a).pipe(
      concatMap(b => 
        C(b).pipe((c) => c); // also tried of(c)
      )
    )
  )
);

I've also tried

return A.pipe(
  concatMap(a => {
    return B(a).pipe(map(b => {a: a, b: b});
  ),
  concatMap({a, b} => {
    return C(b);
  )
);

How do I subscribe to A, then B, then C..., and then only get the value from the innermost observable?

If I put a tap after my last concatMap I get my expected return value. But my resolver never resolves? (or the wrong thing is getting emitted? I cannot really tell.)

Answer 1

If one of the observables in the chain never completes (like route params or query params), it'll halt the whole train.

switchMap should do:

A.pipe(
    switchMap(B), // which is more or less the same as `switchMap(a => B(a))`
    switchMap(C),
).subscribe(//...

Answer 2

Route resolvers need to complete before the Angular Router will continue. This is the same for route guards also. Adding a operator that takes an emission, such as take(1), or first() and completes will solve the problem.

return A.pipe(
  concatMap(a => {
    return B(a).pipe(map(b => {a: a, b: b});
  ),
  concatMap({a, b} => {
    return C(b);
  ),
  take(1)
);