Exception/Error In Resolvers (Router) can not be catched in the subscription to "activatedRoute.data"

[jbgraug]

I'm submitting a ... (check one with "x")

[X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I'm using the Router with Resolver interfaces to get some data form a service (backend) before creating a component which will render the data (subscribing to it).
If an exception occurs in the Resolver the application breaks. (Error: Uncaught (in promise))

Expected behavior

If there is an exception in the Resolver i expect the subscribe error function to be called but the ErrorObservable appears in the "activatedRoute.data.value" instead.

// some component
    ngOnInit() {
        this.activatedRoute.data
            .subscribe(
                (data) => {
                    this.data = data.data] || {};
                    console.log('data was set to ' + this.data)
                },
                (error) => {
                    /// we never get here, no matter there was a Promise.reject(), throw Error(), etc.
                     console.log('ups! Error getting data')
                     alert(error);
                });
    }

// some resolver
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): BehaviorSubject<any>|Observable<any>|Promise<any>|any {
     return Observable.throw('This always fails');
}

Minimal reproduction of the problem with instructions

check out the plunker http://plnkr.co/edit/MaiM6T1COr2ppB2AMANx

What is the motivation / use case for changing the behavior?

Catch and treat exceptions within the target component
Please tell us about your environment:

• Angular version: 2.0.X
  2.3.1

Yes

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TypeScript 2.1.1
• Node (for AoT issues):node --version =

[DzmitryShylovich]

Pls add a small repro in plunkr

[jbgraug]

Added plunker http://plnkr.co/edit/MaiM6T1COr2ppB2AMANx

[OscarGalindo]

Same problem here using 2.4.2.

I did a "catch" in the resolve which returns an empty observable and check inside component if empty or not.

[DzmitryShylovich]

But after an error observable will be closed and you won't get any further updates

[DzmitryShylovich]

interface ResolvedData {
  data?: any;
  error?: any;
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<ResolvedData> {
    return this.http.get(url)
         .map(r => {data: r.json()})
         .catch(e => Observable.of({error: e});
  }

is more flexible solution as to me, than 1 time observable

[DzmitryShylovich]

@jbgraug so do you still want that feature or it can be closed?

[jbgraug]

I still want this feature and I think that it is a must as the Observable is not behaving as it should.
You need to add extra code as a workaround and if in the future it is fixed, it will break the workaround code.

[needsmatch]

I agree with @jbgraug I want to be able to catch the resolve service observable error on the ActivateRoute.data observable in my controller.

[JohannesRudolph]

@DzmitryShylovich may be able offer more insight here, but I was under the impression that it is the router's job to ensure that a route can only be loaded once all resolvers complete successfully. If you need more involved error handling, you should consider handling errors in the component or use the "workaround" presented by @DzmitryShylovich.

[OscarGalindo]

@JohannesRudolph why successfully? i want to load the route once the resolver completes, and an error in a Observable actually completes it. I want the possibility to show an error inside the same component as if it worked

[JohannesRudolph]

@OscarGalindo not understanding all the intricacies of rxjs has been one of the biggest headaches I've personally had with angular so far. Observable's can either complete or error, which are two very different things...

The router will only navigate if Resolve and CanActivate guards complete their returned Observables.

[OscarGalindo]

@JohannesRudolph yes, but what i'm trying to say (but my poor english limits me) is that complete and error terminates the stream, so the Observable is finished in both cases with an error or a result but it's finished and i think it's fine to have the possibility of catch that error inside the component instead of a resolver

[jbgraug]

I totally agree with @OscarGalindo .
The problem here is that you can not take over the router error handling (or the resolver's).
If the the resolver fails, the router simply does not do the navigation.
So from my modest point of view we have 4 options here:

1. Do nothing. Cons: This is a workaround an it is not intuitive.
2. Let the component decide how to deal with the error. Cons: I don't see any. You always get to the component no matter what and treat the error there.
3. Import the router in the Resolver and if there is an exception then navigate to whatever url. Cons: I haven't tried it so don't know if it works. Routes are dispersed within the code.
4. Add another attribute 'errorComponent' to the ResolveData type as follows so we can regain control over the error. Cons: You need another component... more boilerplate code.

{ path: 'products/:id', component: ProductComponent, resolve: { data: ProductService errorComponent: ProductErrorComponent }, }

Honestly, I would go for solution 2 which was the initial idea and the most intuitive one.