using HTTP client for Angular 5

Question

I was following this here to learn how to work with the Http client.

https://codecraft.tv/courses/angular/http/core-http-api/

In it, there is a reference to use URLSearchParams

but - from what I have seen in another post URLSearchParams has been depricated.

As of now, the service I am using requires HTTP access. I have the following in order to import HTTP functionality.

// import { HttpModule } from '@angular/http';
// import { HttpErrorResponse } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { Http, Response, RequestOptions, Headers, HttpModule} from '@angular/http';

What is the best way to use HTTP functionality for Angular 5?

TIA

UPDATE

I tried the following but got the error:

core.js:1427 ERROR Error: Uncaught (in promise): Error: StaticInjectorError[HttpClient]: 
  StaticInjectorError[HttpClient]:

TIA

[... snip ...]

import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/shareReplay';


// import { HttpModule } from '@angular/http';
// import { HttpErrorResponse } from '@angular/common/http';
// import { HttpClientModule } from '@angular/common/http';

// import { Http, Response, RequestOptions, Headers, HttpModule} from '@angular/http';

// import { HttpClient, HttpParams  } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent
  ],
  imports: [
    // HttpModule,
    // HttpClientModule,
    // HttpClient,
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    routing
  ],
  providers: [ AppSettings, AdminServicesService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

admin.services.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { User } from 'app/pages/auth-admin/admin-model/user';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { workers } from 'cluster';

// OLD: => import { HttpClient } from '@angular/common/http/src/client';
// import { HttpClient } from '@angular/common/http';

import { HttpClient, HttpParams } from '@angular/common/http';

[... snip ...]

And I got the following error

core.js:1427 ERROR Error: Uncaught (in promise): Error: StaticInjectorError[HttpClient]: 
  StaticInjectorError[HttpClient]: 
    NullInjectorError: No provider for HttpClient!
Error: StaticInjectorError[HttpClient]: 
  StaticInjectorError[HttpClient]: 
    NullInjectorError: No provider for HttpClient!
    at _NullInjector.get (core.js:993)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveNgModuleDep (core.js:10878)
    at _createClass (core.js:10915)
    at _createProviderInstance$1 (core.js:10889)
    at _NullInjector.get (core.js:993)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveNgModuleDep (core.js:10878)
    at _createClass (core.js:10915)
    at _createProviderInstance$1 (core.js:10889)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4744)
    at ZoneDelegate.invokeTask (zone.js:424)

Uncomment ``// import { HttpClientModule } from '@angular/common/http';`` and ``// HttpClientModule,`` in your app.module.ts. — Gregor Doroschenko, Feb 08 '18 at 15:40

score 2 · Accepted Answer · edited Feb 12 '18 at 15:14

In Angular v4.3+ you should use new HttpClient which you should import from @angular/common/http like this:

import { HttpClient } from '@angular/common/http';.

For URLSearchParams you should use HttpParams, which you also should import from @angular/common/http like this:

import { HttpClient, HttpParams } from '@angular/common/http';.

Here is an example for simple GET-request with new HttpClient:

  getSomething(url: string): Observable<any> {
    return this.http
      .get<any>(url, { headers: yourHeaders })
      .catch((e) => this.yourHandleErrorFunction(e));
  }

Here is an example with HttpParams:

  getAttachment(url: string, attachmentId: number, width: number = 0, height: number = 0): Observable<File> {
    let httpParams = new HttpParams();
    httpParams = httpParams.set('height', height.toString());
    httpParams = httpParams.set('width', width.toString());
    return this.http
      .get<File>(url, { headers: yourHeaders, params: httpParams, responseType: 'blob' as 'json' })
      .catch((e) => this.yourHandleError(e));
  }

Read the official angular documentation for HttpClient.

thanks for the information. I made changes and put the results in the post. — Casey Harrils, Feb 08 '18 at 15:34
@CaseyHarrils you should provide ``HttpClientModule`` in ``imports: []`` in your app.module.ts. This HttpClientModule should be imported from ``@angular/common/http``. — Gregor Doroschenko, Feb 08 '18 at 15:38

using HTTP client for Angular 5

1 Answers1