Cache response is not returned in resolve

[sydneyhenrard]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Minimal reproduction of the problem with instructions

I have a route with a guard and a resolve. The same service is called in both and the called method is a HTTP request with caching enabled (useHttpCacheLocalStorage).

The service

  getLeagues(): Observable<League[]> {
    console.log('getLeagues')
    return this.http.get<League[]>(`${LEAGUES_API}`,
      withCache()
    )
  }

The resolve (the tap operator is just to understand why it's not working)

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<League[]> | League[]{
    console.log('call getLeagues from resolve')
    return this.leagueService.getLeagues()
      .pipe(
        tap(val => console.log(`${val}`)),
      );
  }

The behavior is wrong when cache is empty

Cache is empty
Call getLeagues from guard => cache is populated
Call getLeagues from resolve => the tap operator is not called

Refresh the app (cache is already populated)
Call getLeagues from guard
Call getLeagues from resolve => the tap operator is called

Environment

Angular version: 11.0.2


Browser:
- [X] Chrome (desktop) version Chromium to 87.0.4280.67
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

[NetanelBasal]

Create a reproduction in stackblitz, please.

[sydneyhenrard]

Stackblitz: https://stackblitz.com/edit/angular-ivy-bajvyj?file=src/app/league/league.service.ts

If you set cache$ to true it's not working, if you set it to false it's working.
Use the following URL to test: https://angular-ivy-bajvyj.stackblitz.io/leagues/a/b

[NetanelBasal]

The issue is only with useHttpCacheLocalStorage?

[sydneyhenrard]

No the issue is also when using in memory cache. I also tried to remove the guard, it's working. Same thing with only the resolve. So it seems that it's the combination of guard and resolve with both using a cached HTTP request.

[WilliamChelman]

If that can help, I encountered a very similar issue. The only difference is that there is no resolver in my case, just a guard and a component making the same cached call trough a dedicated service. That component is part of a Route config too.

The quick fix I currently have is to add a delay(0) just before the actual cached http call, so that they all skip a frame and that seems to do it for some reason 😅

@Injectable()
export class MyService {
  // ...

  fetchCats() {
    return this.getSomeUrlFromAConfigFile().pipe(
      delay(0),
      switchMap(url => this.http.post<Cat[]>(url, {}, withCache()))
    );
  }
}

To be noted that we use a custom KeySerializer to be able to cache POST queries with a body, but I don't think it plays any part in this. I guess that a timer(0) would also do the trick.