docs: update docs to use HttpClientModule instead of HttpModule (#22727)

Updated most examples to use HttpClientModule instead of deprecated HttpModule

fix #19280

PR Close #22727

aio/content/examples/bootstrapping/src/app/app.module.ts

@@ -5,7 +5,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 // #docregion directive-import
@@ -24,7 +24,7 @@ import { ItemDirective } from './item.directive';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

aio/content/examples/dependency-injection-in-action/src/app/app.module.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { BrowserModule }                from '@angular/platform-browser';
 import { FormsModule }                  from '@angular/forms';
-import { HttpModule }                   from '@angular/http';
+import { HttpClientModule }             from '@angular/common/http';
 
 // import { AppRoutingModule }             from './app-routing.module';
 import { LocationStrategy,
@@ -54,7 +54,7 @@ const c_components = [
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     InMemoryWebApiModule.forRoot(HeroData)
     // AppRoutingModule TODO: add routes
   ],

aio/content/examples/feature-modules/src/app/app.module.ts

@@ -3,7 +3,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 // import the feature module here so you can add it to the imports array below
@@ -17,7 +17,7 @@ import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     CustomerDashboardModule // add the feature module here
   ],
   providers: [],

aio/content/examples/lazy-loading-ngmodules/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 { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
@@ -13,7 +13,7 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     AppRoutingModule
   ],
   providers: [],

aio/content/examples/ngmodules/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 { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 
 /* App Root */
 import { AppComponent } from './app.component';

aio/content/examples/styleguide/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
-import { BrowserModule }            from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 
-import { HttpModule }           from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 
 import { RouterModule } from '@angular/router';
@@ -44,7 +44,7 @@ import * as s0901 from '../09-01/app/app.module';
 @NgModule({
   imports: [
     BrowserModule,
-    HttpModule,
+    HttpClientModule,
     InMemoryWebApiModule.forRoot(HeroData),
 
     s0101.AppModule,

aio/content/guide/bootstrapping.md

@@ -18,8 +18,7 @@ If you use the CLI to generate an app, the default `AppModule` is as follows:
 /* JavaScript imports */
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+
-import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
 
@@ -29,9 +28,7 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    BrowserModule,
+    BrowserModule
-    FormsModule,
-    HttpModule
   ],
   providers: [],
   bootstrap: [AppComponent]
@@ -137,8 +134,8 @@ It tells Angular about other NgModules that this particular module needs to func
 
 This list of modules are those that export components, directives, or pipes
 that the component templates in this module reference. In this case, the component is
-`AppComponent`, which references components, directives, or pipes in `BrowserModule`,
+`AppComponent`, which references components, directives, or pipes in `BrowserModule`.
-`FormsModule`, or  `HttpModule`.
+Other common components in the examples are `FormsModule` and `HttpClientModule`.
 A component template can reference another component, directive,
 or pipe when the referenced class is declared in this module or
 the class was imported from another module.

aio/content/guide/entry-components.md

@@ -36,7 +36,7 @@ The following is an example of specifying a bootstrapped component,
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     AppRoutingModule
   ],
   providers: [],