Mergemap error with sending request from server

Question

I have a angular application and I am doing a post request with a service call.

But I get an error. But the service call send the request. So it is a very misleading error.

This is the method I have:

sendEcheq(patientId: string) {
    if (this.sendEcheq.length > 0) {

      of(this.echeqsToSend)
        .pipe(
          mergeMap(echeqsToSend =>
            forkJoin(
              echeqsToSend.map((echeqFamily) =>
                this.echeqSubmissionMedicalService.createSubmissionBatch(1,   {
                  echeqFamilies: [
                    echeqFamily.family
                  ],
                  participants: [
                   patientId

                  ]
                }).subscribe(result => {
                  console.log(result);
                })
              )
            )
          )
        )
        .subscribe(
          result => {
            this.dialog.close();
            this.snackBar.open('De vcheq(s) zijn verstuurd', 'Ok');
          },
          error => {
            console.error('Server error when assigning vcheq', error);
            this.snackBar.open('Er ging iets mis bij het opsturen, probeer het later nog een keer', 'Ok');
            this.dialog.close();
          }
        );
    }
  }

So if I execute the service methdod: createSubmissionBatch then it works. But I still get this error:

echeq-selector.component.ts:89 Server error when assigning vcheq TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeTo (subscribeTo.js:41)
    at subscribeToResult (subscribeToResult.js:11)
    at new ForkJoinSubscriber (forkJoin.js:42)
    at Observable._subscribe (forkJoin.js:28)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
    at subscribeTo.js:21
    at subscribeToResult (subscribeToResult.js:11)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub (mergeMap.js:74)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:68)

of course I googled first on this error. But I only found andswares that where related with something else, like this answare:

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable

Answer 1

You are returning a Subscription instead of a stream because you have an inner .subscribe that prints your result.

You should pipe the result to a tap operation instead and print it there, since tap wont modify the returned stream.

sendEcheq(patientId: string) {
  if (this.sendEcheq.length > 0) {
    of (this.echeqsToSend)
    .pipe(
      mergeMap(echeqsToSend =>
        forkJoin(
          echeqsToSend.map((echeqFamily) =>
              this.echeqSubmissionMedicalService.createSubmissionBatch(1, {
                  echeqFamilies: [
                      echeqFamily.family
                  ],
                  participants: [
                      patientId

                  ]
              }).pipe(
                  tap(result => console.log(reslult))
              )
          )
        )
      )
    ).subscribe(
      result => {
          this.dialog.close();
          this.snackBar.open('De vcheq(s) zijn verstuurd', 'Ok');
      },
      error => {
          console.error('Server error when assigning vcheq', error);
          this.snackBar.open('Er ging iets mis bij het opsturen, probeer het later nog een keer', 'Ok');
          this.dialog.close();
        }
    );
  }
}