Removed the conversion of Observables to Promises.

src/app/dashboard/dashboard.component.ts

@@ -19,7 +19,13 @@ export class DashboardComponent implements OnInit {
 
   ngOnInit(): void {
     this.heroService.getHeroes()
-      .then(heroes => this.heroes = heroes.slice(1, 5));
+      .subscribe(
+        heroes => this.heroes = heroes.slice(1, 5),
+        error => {
+          console.error('An error occurred', error);
+          this.heroes = []
+        }
+      );
   }
 
   gotoDetail(hero: Hero): void {

src/app/hero-detail/hero-detail.component.ts

@@ -26,7 +26,12 @@ export class HeroDetailComponent implements OnInit {
         const id = +params['id'];
         this.navigated = true;
         this.heroService.getHero(id)
-            .then(hero => this.hero = hero);
+          .subscribe(
+            hero => this.hero = hero,
+            error => {
+              console.error('An error occurred', error);
+              this.hero = undefined
+            });
       } else {
         this.navigated = false;
         this.hero = new Hero();
@@ -36,12 +41,15 @@ export class HeroDetailComponent implements OnInit {
 
   save(): void {
     this.heroService
-        .save(this.hero)
-        .then(hero => {
+        .saveHero(this.hero)
+        .subscribe(hero => {
           this.hero = hero; // saved hero, w/ id if new
           this.goBack(hero);
-        })
-        .catch(error => this.error = error); // TODO: Display error message
+        },
+          error => {
+            console.error('An error occurred', error);
+            this.error = error;// TODO: Display error message
+          });
   }
 
   goBack(savedHero: Hero = null): void {

src/app/hero.service.ts

@@ -1,79 +1,74 @@
-import { Injectable } from '@angular/core';
-import { Headers, Http, Response } from '@angular/http';
+import {Injectable} from '@angular/core';
+import {Headers, Http} from '@angular/http';
 
-import 'rxjs/add/operator/toPromise';
-
-import { Hero } from './hero';
+import {Hero} from './hero';
+import {Observable} from 'rxjs/Observable';
 
 @Injectable()
 export class HeroService {
   private heroesUrl = 'app/heroes';  // URL to web api
 
   constructor(private http: Http) { }
 
-  getHeroes(): Promise<Array<Hero>> {
+  getHeroes(): Observable<Hero[]> {
     return this.http
       .get(this.heroesUrl)
-      .toPromise()
-      .then((response) => {
-        return response.json().data as Hero[];
-      })
-      .catch(this.handleError);
+      .map(res => {
+        return res.json().data;
+      });
   }
 
-  getHero(id: number): Promise<Hero> {
-    return this.getHeroes()
-      .then(heroes => heroes.find(hero => hero.id === id));
+  getHero(id: number): Observable<Hero> {
+    const url = `${this.heroesUrl}/${id}`;
+
+    return this.http
+      .get(url)
+      .map(res => {
+        return res.json().data;
+      });
   }
 
-  save(hero: Hero): Promise<Hero> {
+  saveHero(hero: Hero): Observable<Hero> {
     if (hero.id) {
       return this.put(hero);
+    } else {
+      return this.post(hero);
     }
-    return this.post(hero);
   }
 
-  delete(hero: Hero): Promise<Response> {
+  deleteHero(hero: Hero): Observable<Hero> {
     const headers = new Headers();
     headers.append('Content-Type', 'application/json');
 
     const url = `${this.heroesUrl}/${hero.id}`;
 
     return this.http
       .delete(url, { headers: headers })
-      .toPromise()
-      .catch(this.handleError);
+      .map(() => hero);
   }
 
   // Add new Hero
-  private post(hero: Hero): Promise<Hero> {
+  private post(hero: Hero): Observable<Hero> {
     const headers = new Headers({
       'Content-Type': 'application/json'
     });
 
     return this.http
       .post(this.heroesUrl, JSON.stringify(hero), { headers: headers })
-      .toPromise()
-      .then(res => res.json().data)
-      .catch(this.handleError);
+      .map(res => {
+        return res.json().data;
+      });
   }
 
   // Update existing Hero
-  private put(hero: Hero): Promise<Hero> {
+  private put(hero: Hero): Observable<Hero> {
     const headers = new Headers();
     headers.append('Content-Type', 'application/json');
 
     const url = `${this.heroesUrl}/${hero.id}`;
 
     return this.http
       .put(url, JSON.stringify(hero), { headers: headers })
-      .toPromise()
-      .then(() => hero)
-      .catch(this.handleError);
-  }
-
-  private handleError(error: any): Promise<any> {
-    console.error('An error occurred', error);
-    return Promise.reject(error.message || error);
+      .map(() => hero);
   }
 }

src/app/heroes/heroes.component.ts

@@ -23,8 +23,9 @@ export class HeroesComponent implements OnInit {
   getHeroes(): void {
     this.heroService
       .getHeroes()
-      .then(heroes => this.heroes = heroes)
-      .catch(error => this.error = error);
+      .subscribe(
+        heroes => this.heroes = heroes,
+        error => this.error = error);
   }
 
   addHero(): void {
@@ -40,12 +41,11 @@ export class HeroesComponent implements OnInit {
   deleteHero(hero: Hero, event: any): void {
     event.stopPropagation();
     this.heroService
-      .delete(hero)
-      .then(res => {
+      .deleteHero(hero)
+      .subscribe(() => {
         this.heroes = this.heroes.filter(h => h !== hero);
         if (this.selectedHero === hero) { this.selectedHero = null; }
-      })
-      .catch(error => this.error = error);
+      }, error => this.error = error);
   }
 
   ngOnInit(): void {