-1

When using the resolve :{ key : ResolverService} to resolve some data for the component, if the ResolverService returns some data immediately (without using observable or promise), the component is loaded as expected on the UI. But, if the resolver is returning Observable, then it is not working, even when the observable gets its next value;

Example on stackblitz:

https://stackblitz.com/edit/ng-delayed-resolver-issue

The logic for returning observable in guard and resolver is the same, but the resolve doesn't seem to work for some reason.

Already checked this Router Resolver not rendering component , didn't help much.

Any help for the given scenario is appreciated. Thanks

Sachin Gupta
  • 4,981
  • 3
  • 16
  • 32

1 Answers1

1

The observable returned by the resolver must complete. Yours never complete, so the navigation never happens.

A simpler way of defininig your delayed observable (that would complete) would be to use the delay pipe:

return of('data from delayed').pipe(delay(1000));
JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • check the updated file, I used observer.complete(). to do it. https://stackblitz.com/edit/ng-delayed-resolver-issue?file=src%2Fapp%2Fdelayed.resolver.service.ts – Sachin Gupta Dec 30 '18 at 19:08
  • @SachinGupta yes, you can of course do that. But it's much less elegant and concise than what I suggest using in my answer. – JB Nizet Dec 30 '18 at 19:11
  • I agree, but `rxjs` imports have messed up my brain. – Sachin Gupta Dec 30 '18 at 19:14
  • It's actually simple: everything (types, factory functions, like Observable, of) is imported from 'rxjs', except operators, (i.e. everything you put inside pipe(), like delay) which are imported from 'rxjs/operators'). – JB Nizet Dec 30 '18 at 19:15