Angular 2 router resolve with Observable
<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>