Angular 8 route resolver not canceling route navigation when return EMPTY

Question

I'm adding an Angular 8 route resolver to prefetch data. Upon failure (for any reason) I return an EMPTY to cancel the route navigation. However, when I test this, I can step into the catchError block, it shows the toaster, and it returns EMPTY, but the route navigation is not being canceled. According to all the articles I have read, this should work. Wanted to know if anybody sees something that I don't. I have only included the resolve method, since all other configuration is working.


  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Country[]> | Observable<never> {
    return this.countryService.getCountries().pipe(      
      mergeMap((countries) => {
        if (countries)
        {
          return of(countries);
        }
        return EMPTY;
      }),
      catchError(error => {
        this.toasterService.pop('error', '', 'There was a problem prefetching the data required to submit a request. If the problem persists, please notify the administrator.');
        return EMPTY;
      }));
  }

I expect this code to cancel navigation, per angular documentation.

score 2 · Answer 1 · answered Jul 17 '19 at 21:21

2

Update: I went back to the source, angular.io and looked at how the angular team implemented the resolver. They had a piece of code that all other blog posts were missing:

 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Country[]> | Observable<never> {
    return this.countryService.getCountries().pipe(      
      mergeMap((countries) => {
        if (countries)
        {
          return of(countries);
        }
        this.router.navigate(['/']);//<----- THIS LINE, TO RE-DIRECT TO ANOTHER ROUTE
        return EMPTY;
      }),
      catchError(error => {
        this.toasterService.pop('error', '', 'There was a problem prefetching the data required to submit a request. If the problem persists, please notify the administrator.');
        this.router.navigate(['/']);//<----- THIS LINE, TO RE-DIRECT TO ANOTHER ROUTE
        return EMPTY;
      }));
  }

So adding the router re-direct seems like an extra step to me. Especially since it is in direct contradiction that the EMPTY would cancel the navigation. What am I missing?

answered Jul 17 '19 at 21:21

flyboy78

81
1
7

I have the same issue, but what I have noticed that return EMPTY works for child route, not the parent one. I need to explicitly redirect inside parent route resolver but for a child, all works fine. Does anyone know what is going on? – demsey Sep 25 '19 at 23:40
Are you referring to a scenario like this [link](https://stackoverflow.com/questions/52362416/angular-6-skip-parent-route-resolver-in-child-route) ? – flyboy78 Sep 27 '19 at 14:21
1

Yes, I found this is an existing issue https://github.com/angular/angular/issues/24195 – demsey Sep 28 '19 at 21:56
No overload matches this call, anyone was facing that issue doing this? – BruneX Jun 10 '20 at 22:23
Can you give me a bit more info.. maybe the lines of code? – flyboy78 Jun 12 '20 at 19:22
You're not missing anything it's the migration guide that is wrong imo, I'm facing the same issue – Lautre Sep 10 '21 at 09:19

Angular 8 route resolver not canceling route navigation when return EMPTY

1 Answers1