How to use forkJoin and mergeMap in Angular resolver to chain HTTP requests?

Question

I am building a resolver that is used when my app loads initially. I need to run several HTTP requests, which can be run at the same time (hence using forkJoin). But there are a few that need to be chained once the forkJoin is completed. What would be the best way to accomplish this? I tried using mergeMap as follows:

  resolve(): Observable<any> {
return forkJoin([
  this.dataService.getUser(),
  this.dataService.getSummary()
]).mergeMap((data) => {
  return this.dataService.listDetails(data[1]);
});

}

However, I get the following error:

    ERROR Error: Uncaught (in promise): TypeError: (0 , rxjs__WEBPACK_IMPORTED_MODULE_1__.forkJoin)(...).mergeMap is not a function
TypeError: (0 , rxjs__WEBPACK_IMPORTED_MODULE_1__.forkJoin)(...).mergeMap is not a function

Answer 1

mergeMap is an operator. These need to be used inside the pipe method:

  resolve(): Observable<any> {
    return forkJoin([
      this.dataService.getUser(),
      this.dataService.getSummary()
    ]).pipe(mergeMap((data) => {
      return this.dataService.listDetails(data[1]);
    }));
  }