fix

tools/app/angular-tour-of-heroes/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-
+import { HttpClientModule } from '@angular/common/http'
 import { AppComponent } from './app.component';
 import { HeroesComponent } from './heroes/heroes.component';
 import { HeroDetailComponent } from './hero-detail/hero-detail.component';
@@ -20,7 +20,8 @@ import { DashboardComponent } from './dashboard/dashboard.component';
   imports: [
     BrowserModule,
     FormsModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

tools/app/angular-tour-of-heroes/src/app/hero.service.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable, throwError, of } from 'rxjs';
-import { catchError, retry } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 
 import { Hero } from './hero';
@@ -15,14 +14,14 @@ export class HeroService {
 
   getHeroes(): Observable<Hero[]> {
     this.messageService.add('HeroService: fetched heroes');
-    return of(HEROES)
-    // return this.http.get<Hero[]>(`/heroes`)
+    // return of(HEROES)
+    return this.http.get<Hero[]>(`http://172.16.3.185:5000/heroes`)
   }
 
   getHero(id: number): Observable<any> {
     this.messageService.add(`HeroService: fetch hero id=${id}`);
-    return of(HEROES.find(hero => hero.id === id))
-    // return this.http.get<Hero>(`/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}`)
   }
 
   updateHero(hero: Hero): Observable<any> {