ng-block-ui not working with Angular 7 concatmap

Question

I'm using NgBlockUI and BlockUIHttpModule with blockAllRequestsInProgress set to true in an app I'm working on. In general it's working fine, but on one page I'm using a concat map to perform some action and then update the data. The first request, the update, triggers BlockUI fine, but the second one doesn't. Otherwise, it executes properly. It's just a little jarring for the user since the results seem to update without warning. Here's the code for the function:

onUpdate(event: items[]) {
  this.updateService.update(event).concatMap(
    _ => this.seachService.search(this.cachedSearch)
  ).subscribe(
    resp => this.handleResponse(resp),
    err => this.handleError(err)
  );
}

I tried calling BlockUI directly, but still no luck. As a last resort, I'm going to make the whole thing one request, but I'd like to at least understand why this isn't working.

Answer 1

This happened to me as well. This issue occurs for sequential HTTP calls (usually with await) wherein the second request is not blocked by ng-block-ui.

As fix what I did was set blockAllRequestsInProgress to false. The behavior is just the same but setting it to false yields more predictable results:

    BlockUIHttpModule.forRoot({
      blockAllRequestsInProgress: false,
      requestFilters: [urlFilter]
    }),

I've also updated to ng-block-ui to latest version as of this writing:

    "ng-block-ui": "^2.1.8",