diff --git a/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts
index 9f125bbf0e..3b983f5bda 100644
--- a/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts
+++ b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts
@@ -3,7 +3,7 @@
 /* avoid */
 
 import { ExceptionService, SpinnerService, ToastService } from '../../core';
-import { HttpClient } from '@angular/common/http';
+import { Http } from '@angular/http';
 import { Injectable } from '@angular/core';
 import { map } from 'rxjs/operators';
 import { Hero } from './hero.model';
@@ -16,17 +16,17 @@ export class HeroService {
     private exceptionService: ExceptionService,
     private spinnerService: SpinnerService,
     private toastService: ToastService,
-    private http: HttpClient
+    private http: Http
   ) { }
 
   getHero(id: number) {
-    return this.http.get<Hero>(`api/heroes/${id}`).pipe(
-      map(response => response.data as Hero));
+    return this.http.get(`api/heroes/${id}`).pipe(
+      map(response => response.json().data as Hero));
   }
 
   getHeroes() {
-    return this.http.get<Hero[]>(`api/heroes`).pipe(
-      map(response => response.data as Hero[]));
+    return this.http.get(`api/heroes`).pipe(
+      map(response => response.json().data as Hero[]));
   }
 
 }
diff --git a/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts
index 573e847091..0a50c11bb4 100644
--- a/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts
+++ b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts
@@ -1,12 +1,11 @@
 // #docregion
 // #docregion example
-import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { map } from 'rxjs/operators';
+import { Http }       from '@angular/http';
+import { map }        from 'rxjs/operators';
 
-import { ExceptionService, SpinnerService, ToastService } from '../../core';
 import { Hero } from './hero.model';
-
+import { ExceptionService, SpinnerService, ToastService } from '../../core';
 // #enddocregion example
 
 @Injectable()
@@ -17,17 +16,17 @@ export class HeroService {
     private exceptionService: ExceptionService,
     private spinnerService: SpinnerService,
     private toastService: ToastService,
-    private http: HttpClient
+    private http: Http
   ) { }
 
   getHero(id: number) {
-    return this.http.get<Hero>(`api/heroes/${id}`).pipe(
-      map(response => response as Hero));
+    return this.http.get(`api/heroes/${id}`).pipe(
+      map(response => response.json() as Hero));
   }
 
   getHeroes() {
-    return this.http.get<Hero[]>(`api/heroes`).pipe(
-      map(response => response as Hero[]));
+    return this.http.get(`api/heroes`).pipe(
+      map(response => response.json() as Hero[]));
   }
 
 }