Executing resolvers one after the other in Angular 2+

Question

Given the following route:

path: \'\',
component: MyComponent,
resolve: {
    foo: FooResolver,
    bar: BarResolver
}

Is there any way of tell

Answer 1

I tackled this scenario using combineLatest in a single resolver. You can do this:

@Injectable({providedIn: 'root'})
export class FooBarResolver implements Resolve {
  constructor(
    private readonly fooResolver: FooResolver,
    private readonly barResolver: BarResolver  
  ) {}

  resolve() {
    return combineLatest(
      this.fooResolver.resolve(), 
      this.barResolver.resolve()
    ).pipe(map(([users, posts]) => ({users, posts})))
  }
}