I have been working on an Angular app where I am using a resolver to preload data in the component. Below is the code for the resolver:
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): void {
return Observable.create(observer => {
const searchProductsRequest = this.journeyDataService.searchProductsRequest;
this.basketService.reset();
this.progressService.subscribe(
this.productsPublicApiService.getRecommendedProductCategoriesUsingGET(searchProductsRequest.vrn,
searchProductsRequest.postcode),
(response) => {
// saving work type list
observer.next(response.categories);
},
// handling server errors
(err) => console.error(err)
);
observer.complete();
});
}
In the component, I have the following code:
ngOnInit() {
this.productCategoryList = this.route.snapshot.data.productCategoryList;
console.log('resolve', this.productCategoryList);
}
However, when checking the value of 'this.productCategoryList', it is null. This is because the response from the server arrives after the complete function is called, resulting in the data not being available for display.