title: Angular 2 router resolve with Observable
body: <p>After the release of Angular 2 RC.5 there was introduced router resolve. <a href="https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard" rel="nofollow noreferrer">Here</a> demonstrated example with Promise, how to do the same if I make a request to the server with Observable?</p>
  <p>search.service.ts</p>
  <pre class="lang-ts prettyprint-override"><code>searchFields(id: number) {
    return this.http.get(`http://url.to.api/${id}`).map(res =&gt; res.json());
  }
  </code></pre>
  <p>search-resolve.service.ts</p>
  <pre class="lang-ts prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router';
  import { Observable } from 'rxjs/Observable';
  
  import { SearchService } from '../shared';
  
  @Injectable()
  export class SearchResolveService implements Resolve&lt;any&gt; {
  
    constructor(
      private searchService: SearchService ,
      private router: Router
    ) {}
  
    resolve(route: ActivatedRouteSnapshot): Observable&lt;any&gt; | Promise&lt;any&gt; | any {
      let id = +route.params['id'];
      return this.searchService.searchFields(id).subscribe(fields =&gt; {
        console.log('fields', fields);
        if (fields) {
          return fields;
        } else { // id not found
          this.router.navigate(['/']);
          return false;
        }
      });
    }
  }
  </code></pre>
  <p>search.component.ts</p>
  <pre class="lang-ts prettyprint-override"><code>ngOnInit() {
    this.route.data.forEach((data) =&gt; {
      console.log('data', data);
    });
  }
  </code></pre>
  <p>Get <code>Object {fields: Subscriber}</code> instead of real data.</p>