RxJS forkJoin's http requests being cancelled by chrome

Question

I am facing an issue with RxJS's forkJoin operator and http requests being cancelled by chrome.

I have an array of observables (i.e. http requests) called validationSupportBatch$.

I am using the array as follows:

this.subscription.add(
  forkJoin<T>(validationSupportBatch$)
    .pipe(mergeMap(() => this.getByStandardActivityCode()))
    .subscribe((svs: T[]) => {
        this.validationSupports = svs;
        this.notificationService.success('SVS.SAVE.success');
      },
      error => this.notificationService.error('SVS.SAVE.failure')
    )
);

Unfortunately, the requests are cancelled by chrome (see screenshot below for a batch of 3 http requests).

Can someone please help?

edit:

Here are the request headers:

Provisional headers are shown
Accept: application/json, text/plain, */*
Authorization: Bearer XXX
Content-Type: application/json
Origin: https://localhost:4200
Referer: https://localhost:4200/validation/applied/activity/HHN-KADJAR-A0000020/standard-validation-support?planId=HHN-KADJAR-I001
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36
x-validation-context: APPLIED
x-validation-project-family: HHN
x-validation-project-name: Kadjar
x-validation-project-scope: 39416543-6b07-4e92-afd5-afacb1f18975

and the request body (just json):

{"id":null,"nature":"PHYSICAL_POWERTRAIN","natureLabel":"Physical - Powertrain","numberOfDays":0,"requiredQty":2,"appliedActivity":{"code":"HHN-KADJAR-A0000020"}}

edit 2: Oddly enough, when I don't add the forkJoin to the subscription, the requests work fine. My code is now:

forkJoin<T>(validationSupportBatch$)
  .pipe(mergeMap(() => this.getByStandardActivityCode()))
  .subscribe((svs: T[]) => {
        this.validationSupports = svs;
        this.notificationService.success('SVS.SAVE.success');
      },
      error => this.notificationService.error('SVS.SAVE.failure')
 );

Notice the this.subscription.add( part has been removed.

Any idea why the subscription would prevent the requests to get through?

edit 3: Here is how I manage my subscriptions in my component:

export abstract class ValidationSupportListComponent<T, U> implements OnInit, OnDestroy {

  subscription: Subscription = new Subscription();

  ...

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  saveValidationSupports(supports: T[]) {
    const validationSupportBatch$ = _(supports)
      .filter(support => support.requiredQty > 0)
      .flatMap(support => _.times(support.requiredQty, () => this.saveValidationSupport(support)))
      .value();

    this.subscription.add(
      forkJoin<T>(validationSupportBatch$)
        .pipe(mergeMap(() => this.getByStandardActivityCode()))
        .subscribe((svs: T[]) => {
            this.validationSupports = svs;
            this.notificationService.success('SVS.SAVE.success');
          },
          error => this.notificationService.error('SVS.SAVE.failure')
        )
    );
  }

edit 4: I am realizing that other uses of this.subscription.add( within the component do not work either...

See for example. Following code results in a cancelled request:

  this.subscription.add(
    this.deleteValidationSupport(entity)
      .subscribe(() => this.removeFromModel(entity))
  );

Answer 1

I found the solution to my issue.

In one of the sub classes of the component, I had the following issue in my code:

  this.subscription = this.planService
    .get(this.planId)
    .subscribe(plan => (this.direction = plan.direction));

which reassigned the instance of the subscription. Hence the cancelled requests...