diff --git a/tools/app/angular-tour-of-heroes/src/app/dashboard/dashboard.component.ts b/tools/app/angular-tour-of-heroes/src/app/dashboard/dashboard.component.ts
index 04434b0..441f17a 100644
--- a/tools/app/angular-tour-of-heroes/src/app/dashboard/dashboard.component.ts
+++ b/tools/app/angular-tour-of-heroes/src/app/dashboard/dashboard.component.ts
@@ -16,8 +16,8 @@ export class DashboardComponent implements OnInit {
     this.getHeroes();
   }
 
-  getHeroes(): void {
-    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes.slice(1, 5));
+  async getHeroes(): Promise<void> {
+    this.heroes = await this.heroService.getHeroes()
   }
 
 }
diff --git a/tools/app/angular-tour-of-heroes/src/app/hero-detail/hero-detail.component.ts b/tools/app/angular-tour-of-heroes/src/app/hero-detail/hero-detail.component.ts
index fb64953..3635dc5 100644
--- a/tools/app/angular-tour-of-heroes/src/app/hero-detail/hero-detail.component.ts
+++ b/tools/app/angular-tour-of-heroes/src/app/hero-detail/hero-detail.component.ts
@@ -20,9 +20,9 @@ export class HeroDetailComponent implements OnInit {
     this.getHero();
   }
 
-  getHero(): void {
+  async getHero(): Promise<void> {
     const id = +this.route.snapshot.paramMap.get('id');
-    this.heroService.getHero(id).subscribe(hero => this.hero = hero);
+    this.hero = await this.heroService.getHero(id)
   }
 
   goBack(): void {
@@ -30,6 +30,6 @@ export class HeroDetailComponent implements OnInit {
   }
 
   save(): void {
-    this.heroService.updateHero(this.hero).subscribe(() => this.goBack());
+    // this.heroService.updateHero(this.hero).subscribe(() => this.goBack());
   }
 }
diff --git a/tools/app/angular-tour-of-heroes/src/app/hero.service.ts b/tools/app/angular-tour-of-heroes/src/app/hero.service.ts
index 876decc..f865f4d 100644
--- a/tools/app/angular-tour-of-heroes/src/app/hero.service.ts
+++ b/tools/app/angular-tour-of-heroes/src/app/hero.service.ts
@@ -1,27 +1,24 @@
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 import { Hero } from './hero';
 import { MessageService } from './message.service';
-import { HEROES } from './mock-heroes'
 
 @Injectable({
   providedIn: 'root'
 })
 export class HeroService {
   constructor(private messageService: MessageService, private http: HttpClient) { }
-
-  getHeroes(): Observable<Hero[]> {
+  
+  getHeroes(): Promise<Hero[]> {
     this.messageService.add('HeroService: fetched heroes');
-    // return of(HEROES)
-    return this.http.get<Hero[]>(`http://172.16.3.185:5000/heroes`)
+    return this.http.get<Hero[]>(`http://172.16.3.185:5000/heroes`).toPromise()
   }
 
-  getHero(id: number): Observable<any> {
+  getHero(id: number): Promise<Hero> {
     this.messageService.add(`HeroService: fetch hero id=${id}`);
-    // return of(HEROES.find(hero => hero.id === id))
-    return this.http.get<Hero>(`http://172.16.3.185:5000/hero?id=${id}`)
+    return this.http.get<Hero>(`http://172.16.3.185:5000/hero?id=${id}`).toPromise()
   }
 
   updateHero(hero: Hero): Observable<any> {
diff --git a/tools/app/angular-tour-of-heroes/src/app/heroes/heroes.component.ts b/tools/app/angular-tour-of-heroes/src/app/heroes/heroes.component.ts
index e34d720..e019bbe 100644
--- a/tools/app/angular-tour-of-heroes/src/app/heroes/heroes.component.ts
+++ b/tools/app/angular-tour-of-heroes/src/app/heroes/heroes.component.ts
@@ -18,8 +18,12 @@ export class HeroesComponent implements OnInit {
 
   constructor(private heroService: HeroService, private messageService: MessageService) { }
 
-  getHeroes(): void {
-    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  async getHeroes() {
+    try {
+      this.heroes = await this.heroService.getHeroes();
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
   }
 
   ngOnInit(): void {