[Feature request] router resolver should be cancellable

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

I search around the issues regarding this and did find one but it was closed (https://github.com/angular/angular/issues/13056). I believe it should rather be a feature request. It is completely legit to expect that the ongoing route and the observable sitting inside the resolve function should be discarded if the user changes their mind and preceded to another route. Youtube is an example.

Current behavior

The scenario is the user clicks a slow route link that fetches data necessary for a component, and while that is resolving the user hits back, or clicks on another link. I would then want to cancel the current resolve and begin the new routing.

To demotrate: https://stackblitz.com/edit/angular-u6zquh

To try to solve the problem, I inject the router event into the SomeResolve class and hoping to do like… (below is pseudo code)

@Injectable()
export class SomeResolve implements Resolve<any> {

  constructor(private someService$: SomeService, private router$: Router) { }

  resolve() {
    return this.someService$
      .takeUntil(
        this.router$.events.pipe(
          filter(NavigationStart)
        )
      );
  }
}

It seems that all the router events are blocked until resolver complete. Below is quoted from Angular.io router and navigation section.

The Observable provided to the Router must complete. If the Observable does not complete, the navigation will not continue.

So, this is not a solution because no events are shooted before resolver function complete. User still needs to wait for the ajax/observable complete before proceeding.

Expected behavior

The router events are not blocked or any idea which can lead to cancellable router resolver.

Angular version: 5.2.0

[jasonaden]

Thank you for this feature request, and yes, I agree. We are looking at creating some new APIs to make this work. I’ll add the feature label here and we should be picking some of these up in the relatively near future.

[dereklin]

I am having the exact problem. I have multiple routes in the app. One lazily loaded route uses a resolver to get some async data. When the network is slow, this route could take a minute to load. So now I use the router lifecycle to show a spinner while the sync code is running. But let’s say the user clicks on this slow route and then wants to click on another route to get out, they are stuck at this slow route until the resolver resolves.

What should happen is that the slow resolver should be cancelled when route changes – route change should take precedence over route resolver.

Route resolver is a nice idea and it’s easy to use. But when it’s blocking, its only use might be for initial app bootstrapping.

For now, we have to manually write the observables in the component.