title: Angular2 router with Http data service through a Resolve with Observable catching 404
body: <p>In my resolve guard I am getting an Http Observable to return the JSON of a user from a particular <code>id</code>.</p>
  
  <p>I want to catch an error and reroute to the users overview if the <code>id</code> does not exist. I have seen code that solves that with a Promise, but not with an Observable. <strong>I would like to see a solution with an Observable!</strong></p>
  
  <p>Currently I get an <code>"EXCEPTION: Uncaught (in promise): Response with status: 404 Not Found for URL: http://127.0.0.1:3000/users/191"</code> since user 191 does not exsist.</p>
  
  <p>Here is my code:</p>
  
  <p>Resolve:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Resolve, ActivatedRouteSnapshot, ActivatedRoute } from '@angular/router';
  import { UsersService } from '../shared/services/users.service';
  import { User } from '../shared/models/user';
  
  @Injectable()
  export class UserResolveService implements Resolve&lt;User&gt; {
      user: User;
      constructor(private service: UsersService) {}
      resolve(route: ActivatedRouteSnapshot) {
          let id = route.params['id'];
          // getUser returns an Http Observable
          return this.service.getUser(id);
  
          // ERROR HANDLING IF id DOES NOT EXIST
          // REROUTE TO USER OVERVIEW
  
          // A TUTORIAL WITH PROMISE USES FOLLOWING CODE
          // .then(user =&gt; {
          //   if (user) {
          //     return user;
          //   } else {
          //  // navigate the user back to the users page
          //    this.router.navigate(['/users']);
          //    return false;
          //  }
          // });
      }
  }
  </code></pre>
  
  <p>UsersService getUser(id):</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import { environment } from "../../../environments/environment";
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/catch';
  
  @Injectable()
  export class UsersService {
    private _url = environment.RAILS_API_BASE_URL+"/users";
  
    constructor(private http :Http) { }
      ...
    getUser(userId){
          return this.http.get(this.getUserUrl(userId))
              .map(res =&gt; res.json())             
      }
      ...
    private getUserUrl(userId){
          return this._url + "/" + userId;
      }
  }
  </code></pre>
  
  <p>user.routing.ts:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Routes, RouterModule } from '@angular/router';
  import { ModuleWithProviders } from '@angular/core';
  
  import { UsersResolveService } from './users-resolve.service';
  import { UserResolveService }  from './user-resolve.service';
  
  import { UsersComponent } from './users.component';
  import { UserDetailComponent } from './user-detail.component';
  import { UserSectionComponent } from './user-section.component';
  
  const userRoutes: Routes = [
    {
     path: '',
     component: UserSectionComponent,
     children: [
         {
             path: ':id',
             component: UserDetailComponent,
             resolve: {
                 user: UserResolveService
             }
         }
     ]   
    }    
  ]
  
  export const UsersRouting: ModuleWithProviders = RouterModule.forChild(userRoutes)
  </code></pre>
  
  <p>UserDetailComponent:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute }    from '@angular/router'
  import { UsersService }      from '../shared/services/users.service';
  import { User }              from '../shared/models/user';
  
  @Component({
    templateUrl: './user-detail.component.html',
    styleUrls: ['./user-detail.component.scss']
  })
  
  export class UserDetailComponent implements OnInit {
    user: User;
    constructor(private route: ActivatedRoute) { }  
    ngOnInit() {
     // OLD CALL without resolve
     // let id =  this.route.snapshot.params['id'];
     // this.user = this.usersService.getUser(id)
     //   .subscribe((res) =&gt; {this.user = res;}, error =&gt; {console.log(error)});
  
     // NEW CALL WITH RESOLVE
     this.route.data.forEach((data: { user: User }) =&gt; this.user = data.user );
    }
  }
  </code></pre>