build: remove @angular/http from modules (#34892)

PR Close #34892

modules/playground/src/http/BUILD.bazel

@@ -7,8 +7,8 @@ ng_module(
     srcs = glob(["**/*.ts"]),
     tsconfig = "//modules/playground:tsconfig-build.json",
     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,8 @@
  * 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';
 
 @Component({
   selector: 'http-app',
@@ -23,9 +22,7 @@ import {map} from 'rxjs/operators';
 })
 export class HttpCmp {
   people: Object[];
-  constructor(http: Http) {
+  constructor(http: HttpClient) {
-    http.get('./people.json')
+    http.get('./people.json').subscribe((people: Array<Object>) => this.people = people);
-        .pipe(map((res: Response) => res.json()))
-        .subscribe((people: Array<Object>) => 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

@@ -7,8 +7,8 @@ ng_module(
     srcs = glob(["**/*.ts"]),
     tsconfig = "//modules/playground:tsconfig-build.json",
     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,8 @@
  * 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';
 
 @Component({
   selector: 'jsonp-app',
@@ -22,7 +22,7 @@ import {Jsonp} from '@angular/http';
 })
 export class JsonpCmp {
   people: Object;
-  constructor(jsonp: Jsonp) {
+  constructor(http: HttpClient) {
-    jsonp.get('./people.json?callback=JSONP_CALLBACK').subscribe(res => this.people = res.json());
+    http.jsonp<Object>('./people.json', 'callback').subscribe((res: Object) => 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"}])