refactor: use new Http library in playground (#29355)

PR Close #29355

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",

modules/playground/src/http/app/http_comp.ts

@@ -6,9 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {HttpClient} from '@angular/common/http';
 import {Component} from '@angular/core';
-import {Http, Response} from '@angular/http';
-import {map} from 'rxjs/operators';
+
+interface Person {
+  name: string;
+}
 
 @Component({
   selector: 'http-app',
@@ -16,16 +19,14 @@ import {map} from 'rxjs/operators';
     <h1>people</h1>
     <ul class="people">
       <li *ngFor="let person of people">
-        hello, {{person['name']}}
+        hello, {{person.name}}
       </li>
     </ul>
   `
 })
 export class HttpCmp {
-  people: Object[];
-  constructor(http: Http) {
-    http.get('./people.json')
-        .pipe(map((res: Response) => res.json()))
-        .subscribe((people: Array<Object>) => this.people = people);
+  people: Person[];
+  constructor(http: HttpClient) {
+    http.get('./people.json').subscribe((people: Person[]) => this.people = people);
   }
 }

modules/playground/src/http/index.ts

@@ -6,14 +6,15 @@
  * 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, HttpModule]})
+@NgModule(
+    {declarations: [HttpCmp], bootstrap: [HttpCmp], imports: [BrowserModule, HttpClientModule]})
 export class ExampleModule {
 }
 

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",
     ],

modules/playground/src/jsonp/app/jsonp_comp.ts

@@ -6,8 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {HttpClient} from '@angular/common/http';
 import {Component} from '@angular/core';
-import {Jsonp} from '@angular/http';
+
+interface Person {
+  name: string;
+}
 
 @Component({
   selector: 'jsonp-app',
@@ -15,14 +19,14 @@ import {Jsonp} from '@angular/http';
     <h1>people</h1>
     <ul class="people">
       <li *ngFor="let person of people">
-        hello, {{person['name']}}
+        hello, {{person.name}}
       </li>
     </ul>
   `
 })
 export class JsonpCmp {
-  people: Object;
-  constructor(jsonp: Jsonp) {
-    jsonp.get('./people.json?callback=JSONP_CALLBACK').subscribe(res => this.people = res.json());
+  people: Person[];
+  constructor(http: HttpClient) {
+    http.jsonp('./people.json', 'callback').subscribe(res => this.people = res);
   }
 }

modules/playground/src/jsonp/index.ts

@@ -6,14 +6,18 @@
  * 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, JsonpModule]})
+@NgModule({
+  bootstrap: [JsonpCmp],
+  declarations: [JsonpCmp],
+  imports: [BrowserModule, HttpClientModule, HttpClientJsonpModule]
+})
 export class ExampleModule {
 }
 

modules/playground/src/jsonp/people.json

@@ -1,2 +1,2 @@
 // This can only be requested once due to constant method name :(
-__ng_jsonp__.__req0.finished([{"name":"caitp"}])
+ng_jsonp_callback_0([{"name":"caitp"}])