RxJS5 finalize operator not called

Nico Van Belle picture Nico Van Belle · Apr 9, 2018 · Viewed 12.7k times · Source

I'm trying to trigger a callback when all my observables are executed. In my other, older project i used finally like so and that worked like a charm:

this.myService.callDummy()
  .finally(() => console.log('Works!'))
  .subscribe(result => ...)

But now I'm using a newer version of RxJS with Pipeable operators, but the finally call (now renamed to finalize) never gets executed. There is little information to be found and I'm not sure what I'm doing wrong.

combineLatest(
  this.route.queryParams,
  this.myService.callDummy1(),
  this.myService.callDummy2()
)
.pipe(finalize(() => console.log('Does not work!')))
.subscribe(results => ...);

Any help is appreciated.

Answer

bryan60 picture bryan60 · Apr 9, 2018

In observables, firing and completing are not the same thing.

Even though each of the items emits a value, route.queryParams by definition will never complete since that is how Angular implements it, as a non terminating observable. You will need to manually complete it for your finalize to execute since combineLatest will only complete when EVERY observable being combined inside of it has completed.

combineLatest(
  this.route.queryParams.pipe(take(1)), // take(1) will complete the observable after it has emitted one value
  this.myService.callDummy1(),
  this.myService.callDummy2()
)
.pipe(finalize(() => console.log('Does not work!')))
.subscribe(results => ...);

This will complete.