diff --git a/modules/playground/src/http/BUILD.bazel b/modules/playground/src/http/BUILD.bazel
index 13224b4296..1457d17c7f 100644
--- a/modules/playground/src/http/BUILD.bazel
+++ b/modules/playground/src/http/BUILD.bazel
@@ -10,8 +10,8 @@ ng_module(
     # TODO: FW-1004 Type checking is currently not complete.
     type_check = False,
     deps = [
-        "//packages/common/http",
         "//packages/core",
+        "//packages/http",
         "//packages/platform-browser",
         "//packages/platform-browser-dynamic",
         "@npm//rxjs",
diff --git a/modules/playground/src/http/app/http_comp.ts b/modules/playground/src/http/app/http_comp.ts
index 47df87d00b..4a1be633d0 100644
--- a/modules/playground/src/http/app/http_comp.ts
+++ b/modules/playground/src/http/app/http_comp.ts
@@ -6,12 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {HttpClient} from '@angular/common/http';
 import {Component} from '@angular/core';
-
-interface Person {
-  name: string;
-}
+import {Http, Response} from '@angular/http';
+import {map} from 'rxjs/operators';
 
 @Component({
   selector: 'http-app',
@@ -19,14 +16,16 @@ interface Person {
     <h1>people</h1>
     <ul class="people">
       <li *ngFor="let person of people">
-        hello, {{person.name}}
+        hello, {{person['name']}}
       </li>
     </ul>
   `
 })
 export class HttpCmp {
-  people: Person[];
-  constructor(http: HttpClient) {
-    http.get('./people.json').subscribe((people: Person[]) => this.people = people);
+  people: Object[];
+  constructor(http: Http) {
+    http.get('./people.json')
+        .pipe(map((res: Response) => res.json()))
+        .subscribe((people: Array<Object>) => this.people = people);
   }
 }
diff --git a/modules/playground/src/http/index.ts b/modules/playground/src/http/index.ts
index 4ddec0a89b..19672e8b54 100644
--- a/modules/playground/src/http/index.ts
+++ b/modules/playground/src/http/index.ts
@@ -6,15 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
+import {HttpModule} from '@angular/http';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 import {HttpCmp} from './app/http_comp';
 
-@NgModule(
-    {declarations: [HttpCmp], bootstrap: [HttpCmp], imports: [BrowserModule, HttpClientModule]})
+@NgModule({declarations: [HttpCmp], bootstrap: [HttpCmp], imports: [BrowserModule, HttpModule]})
 export class ExampleModule {
 }
 
diff --git a/modules/playground/src/jsonp/BUILD.bazel b/modules/playground/src/jsonp/BUILD.bazel
index e32c1acd4e..ec9d0f059d 100644
--- a/modules/playground/src/jsonp/BUILD.bazel
+++ b/modules/playground/src/jsonp/BUILD.bazel
@@ -10,8 +10,8 @@ ng_module(
     # TODO: FW-1004 Type checking is currently not complete.
     type_check = False,
     deps = [
-        "//packages/common/http",
         "//packages/core",
+        "//packages/http",
         "//packages/platform-browser",
         "//packages/platform-browser-dynamic",
     ],
diff --git a/modules/playground/src/jsonp/app/jsonp_comp.ts b/modules/playground/src/jsonp/app/jsonp_comp.ts
index 6bf1a9b43e..46e111acf7 100644
--- a/modules/playground/src/jsonp/app/jsonp_comp.ts
+++ b/modules/playground/src/jsonp/app/jsonp_comp.ts
@@ -6,12 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {HttpClient} from '@angular/common/http';
 import {Component} from '@angular/core';
-
-interface Person {
-  name: string;
-}
+import {Jsonp} from '@angular/http';
 
 @Component({
   selector: 'jsonp-app',
@@ -19,14 +15,14 @@ interface Person {
     <h1>people</h1>
     <ul class="people">
       <li *ngFor="let person of people">
-        hello, {{person.name}}
+        hello, {{person['name']}}
       </li>
     </ul>
   `
 })
 export class JsonpCmp {
-  people: Person[];
-  constructor(http: HttpClient) {
-    http.jsonp('./people.json', 'callback').subscribe(res => this.people = res);
+  people: Object;
+  constructor(jsonp: Jsonp) {
+    jsonp.get('./people.json?callback=JSONP_CALLBACK').subscribe(res => this.people = res.json());
   }
 }
diff --git a/modules/playground/src/jsonp/index.ts b/modules/playground/src/jsonp/index.ts
index 0a4fc469b9..c9e6501b8a 100644
--- a/modules/playground/src/jsonp/index.ts
+++ b/modules/playground/src/jsonp/index.ts
@@ -6,18 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {HttpClientJsonpModule, HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
+import {JsonpModule} from '@angular/http';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 import {JsonpCmp} from './app/jsonp_comp';
 
-@NgModule({
-  bootstrap: [JsonpCmp],
-  declarations: [JsonpCmp],
-  imports: [BrowserModule, HttpClientModule, HttpClientJsonpModule]
-})
+@NgModule({bootstrap: [JsonpCmp], declarations: [JsonpCmp], imports: [BrowserModule, JsonpModule]})
 export class ExampleModule {
 }
 
diff --git a/modules/playground/src/jsonp/people.json b/modules/playground/src/jsonp/people.json
index 9d4b4de2ad..764beb25d7 100644
--- a/modules/playground/src/jsonp/people.json
+++ b/modules/playground/src/jsonp/people.json
@@ -1,2 +1,2 @@
 // This can only be requested once due to constant method name :(
-ng_jsonp_callback_0([{"name":"caitp"}])
+__ng_jsonp__.__req0.finished([{"name":"caitp"}])