How to handle error in a Resolver

Question

I'm trying to use resolvers in order to make a better UX. Everything works great on the happy path. What I can't seem to figure out is how to handle exceptions. My resolver calls a service, which hits a webapi project. An example:

FooResolver:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Foo> {       return this.fooService.getById(route.params['id']).catch(err => {     ****not sure what to do/return in the case of a server error****     return Observable.throw(err);   }); }  

FooService:

  public getById(id: string): Observable<Foo> {     return this.http.get(`${ this.apiUrl }/${ id }`)         .map(this.extractData)         .catch(this.handleError); } 

The handleError function:

   protected handleError (error: Response | any) {     // Todo: Log the error        // Errors will be handled uniquely by the component that triggered them     return Observable.throw(error); } 

Inside the FooComponent, I do this (this is never hit in the event of an error returned from the service/resolver):

FooComponent:

ngOnInit(): void {     this.foo= this.route.snapshot.data['foo'];     if (this.foo) {        this.createForm(this.foo);     } } 

I've tried throwing the error (as shown) - I get this exception in the console:

Uncaught (in promise): Response with status: 500 Internal Server Error for URL:

and returning new Observable<Foo>(), which gives:

Cannot read property 'subscribe' of undefined

I have a few resolvers, all of which can experience exceptions on the server, But I don't know what to do in the event of these exceptions.

Answer 1

Here is an example of one of my resolvers with error handling, using the technique that Gunter suggests:

import { Injectable } from '@angular/core'; import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';  import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map'; import 'rxjs/add/observable/of';  import { IProduct } from './product'; import { ProductService } from './product.service';  @Injectable() export class ProductResolver implements Resolve<IProduct> {      constructor(private productService: ProductService,                 private router: Router) { }      resolve(route: ActivatedRouteSnapshot,             state: RouterStateSnapshot): Observable<IProduct> {         let id = route.params['id'];         if (isNaN(+id)) {             console.log(`Product id was not a number: ${id}`);             this.router.navigate(['/products']);             return Observable.of(null);         }         return this.productService.getProduct(+id)             .map(product => {                 if (product) {                     return product;                 }                 console.log(`Product was not found: ${id}`);                 this.router.navigate(['/products']);                 return null;             })             .catch(error => {                 console.log(`Retrieval error: ${error}`);                 this.router.navigate(['/products']);                 return Observable.of(null);             });     } } 

You can find the complete example here: https://github.com/DeborahK/Angular-Routing in the APM-final folder.

UPDATE Feb 2019

Here is a better answer for error handling in a resolver:

1. Wrap your interface in another interface with an optional error property:

/* Defines the product entity */ export interface Product {   id: number;   productName: string;   productCode: string;   category: string;   tags?: string[];   releaseDate: string;   price: number;   description: string;   starRating: number;   imageUrl: string; }  export interface ProductResolved {   product: Product;   error?: any; } 

2. Resolve to that interface:

import { Injectable } from '@angular/core'; import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';  import { Observable, of } from 'rxjs'; import { map, catchError } from 'rxjs/operators';  import { ProductResolved } from './product'; import { ProductService } from './product.service';  @Injectable({   providedIn: 'root', }) export class ProductResolver implements Resolve<ProductResolved> {   constructor(private productService: ProductService) {}    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<ProductResolved> {     const id = route.paramMap.get('id');     if (isNaN(+id)) {       const message = `Product id was not a number: ${id}`;       console.error(message);       return of({ product: null, error: message });     }      return this.productService.getProduct(+id).pipe(       map((product) => ({ product: product })),       catchError((error) => {         const message = `Retrieval error: ${error}`;         console.error(message);         return of({ product: null, error: message });       }),     );   } } 

3. In the component, pull off the piece of the interface you need:

ngOnInit(): void {   const resolvedData: ProductResolved = this.route.snapshot.data['resolvedData'];   this.errorMessage = resolvedData.error;   this.product = resolvedData.product; } 

Answer 2

You need to return an observable that completes with false

handleError() {   return Observable.of([false]); }