Handle errors in a Resolve service
<p>Say I have a <code>ValuesComponent</code> that displays an array of <code>Value</code> in an HTML table.
</p>

<pre><code>// in value.ts
export class Value { ... }
</code></pre>

<pre class="lang-js prettyprint-override"><code>// in values.component.ts
@Component(...)
export class ValuesComponent { ... }
</code></pre>

<p>Being a good programmer and all, I've created a different class that is responsible for providing values. Let's call it the <code>ValuesService</code>.</p>

<pre class="lang-js prettyprint-override"><code>// in values.service.ts
@Injectable()
export class ValuesService
{
    public getValues(): Observable&lt;Value[]&gt;
    {
       ...
    }
}
</code></pre>

<p>Suppose that the service gets its values from a web service: <code>/api/values</code></p>

<p>Now instead of injecting the service directly into my component, I want to let the Angular router pre-fetch the values before navigating to the component.</p>

<p>For that, I created a <code>Resolve</code> service class and plugged it into the router module.</p>

<pre class="lang-js prettyprint-override"><code>// in values-resolver.service.ts
export class ValuesResolverService implements Resolve&lt;Value[]&gt; {
    constructor(private backend: ValuesService) {
    }

    public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;Value[]&gt; {
        return this.backend.getValues();
    }
}
</code></pre>

<pre class="lang-js prettyprint-override"><code>// In app.module.ts (in @NgModule())
imports: [
  RouterModule.forRoot([{
    path: 'values',
    component: ValuesComponent,
    resolve: { values: ValuesResolverService }
  }])
]
</code></pre>

<pre class="lang-js prettyprint-override"><code>// In values.component.ts
public values: Value[];

constructor(private route: ActivatedRoute) {
}

ngOnInit() {
    this.values = route.data.values as Value[];
}
</code></pre>

<p>How am I doing so far? Good? Then where do I put my error handling for when <code>ValuesService.getValues()</code> fails? (connection error, internal server error, ...)</p>

<p>When a user tries to navigate to the <code>/#/values</code> route and an error occurs, I want to log the error to the console and stop navigation. Ideally, I'd like to redirect the user to the <code>/#/error</code> route (not shown in the example code).</p>