Is there a way to make the resolver wait for images from the API before displaying the page in Angular? Currently, it displays the page first and then attempts to retrieve the post images.
@Injectable()
export class DataResolverService implements Resolve<any> {
constructor(
private router: Router,
private API: ApiService
) {}
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any> | Observable<never> {
return this.API.getPostById(route.params.id).pipe(
map(response => {
if (response["images"]) {
const images = [];
response["images"].forEach(image => {
this.API.getImageById(image.id).subscribe(
(img: any) => {
const imageObject = {
url: window.URL.createObjectURL(img),
};
images.push(imageObject);
}
);
});
response["images"] = images;
return response;
}
return response;
})
);
}
}