Resolve not returning data to component

Question

I have a issue where the resolve data is showing as undefined in the component.

Below is my Resolve code

export class MyResolve implements Resolve<any> {

  constructor(private dataServ: DataService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<any> {

    return forkJoin([
      this.dataServ.getA(),
      this.dataServ.getB(),
      this.dataServ.getC()
    ]).pipe(map(response => {
      console.log(response)
      return response;
    })).toPromise().then(data => { console.log(data) });
      
      
    }
}

I can see the data in the console. but when I use the data in component it shows undefined

below is the code in component

var test = this._route.snapshot.data;
console.log(test);

Where _route:ActivatedRoute

I have added the resolve in routing module also.

Please guide

Sort of unrelated but be aware that using a resolver will block the rendering of the component where you're going after clicking on a link for example until the data has been fetched. If you end up fetching multiple endpoints I assume it may take some time to resolve and therefore lead to a bad user experience. More on the topic here: https://stackoverflow.com/questions/49054232/why-would-you-use-a-resolver-with-angular — maxime1992, Nov 25 '20 at 10:25

score 1 · Accepted Answer · answered Nov 25 '20 at 09:59

You return a Promise, which uses a then. The then is expected to return a value for further usage, what you don't. As a result the Promises value is undefined after the then.

You could simply remove the then or you return the value again.

    .then(data => { console.log(data); return data; }); // or remove this line

Resolve not returning data to component

1 Answers1