Questions tagged [angular-httpclient]

Angular HttpClient is the new HTTP client of Angular since version 4.3 from the @angular/common/http package. It is an upgraded version of the former @angular/http package. Unlike the former deprecation, HttpClient responses can be typed and are JSON parsed automatically. You can also use interceptors on the immutable response and request.

The HttpClient class from @angular/common/http (which was introduced in Angular v4) is the newer implementation of the deprecated former Http class from @angular/http.

HttpClient provides the ability to specify the return type of an HTTP request. See below for an example:

export interface Food {
  name: string;
  type: 'fruit' | 'dairy' | /* ... */;
}

// ...

@Component({ /* ... */ })
export class AppComponent {
  foods: Observable<Food[]>;
  constructor(private http: HttpClient) {
    // Specify the return type using the first union type
    this.foods = http.get</* specify return type here */Food[]>('https://example.com/foods.json');
  }
}
<ul *ngFor="let food of foods | async">
  <li>
    <p><strong>Name</strong>: {{ food?.name }}</p>
    <p><strong>Type</strong>: {{ food?.type | titlecase }}</p>
</ul>

foods.json:

[
  {
    name: 'Banana',
    type: 'fruit'
  },
  {
    name: 'Apple',
    type: 'fruit'
  },
  {
    name: 'Milk',
    type: 'diary'
  },
  ...
]

It also adds the ability for HTTP interceptors, which:

...inspect and transform HTTP requests from your application to the server [and vice versa] - Angular - HttpClient

See Write an interceptor for more info.


For more detailed documentation about the HttpClient, see the Angular - HttpClient guide.

1450 questions
245
votes
10 answers

Adding a HTTP header to the Angular HttpClient doesn't send the header, why?

Here is my code: import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; logIn(username: string, password: string) { const url = 'http://server.com/index.php'; const body = JSON.stringify({username: username, …
Frennetix
  • 3,269
  • 5
  • 15
  • 23
239
votes
5 answers

Difference between HttpModule and HttpClientModule

Which one is best to build a mock web service just for test purposes in Angular apps?
Aiyoub A.
  • 5,261
  • 8
  • 25
  • 38
206
votes
12 answers

Angular HttpClient "Http failure during parsing"

I try to send an POST request from Angular 4 to my Laravel backend. My LoginService has this method: login(email: string, password: string) { return this.http.post(`http://10.0.1.19/login`, { email, password }) } I subscribe to this method in…
nutzt
  • 2,773
  • 3
  • 17
  • 26
201
votes
9 answers

Angular 4 HttpClient Query Parameters

I have been looking for a way to pass query parameters into an API call with the new HttpClientModule's HttpClient and have yet to find a solution. With the old Http module you would write something like this. getNamespaceLogs(logNamespace) { …
joshrathke
  • 7,564
  • 7
  • 23
  • 38
191
votes
13 answers

Catching errors in Angular HttpClient

I have a data service that looks like this: @Injectable() export class DataService { baseUrl = 'http://localhost' constructor( private httpClient: HttpClient) { } get(url, params): Promise { return…
I Stand With Russia
  • 6,254
  • 8
  • 39
  • 67
111
votes
16 answers

Angular 4.3 - HttpClient set params

let httpParams = new HttpParams().set('aaa', '111'); httpParams.set('bbb', '222'); Why this doesn't work? It only set the 'aaa' and NOT the 'bbb' Also, I have an object { aaa: 111, bbb: 222 } How can I set all the values without looping? UPDATE…
Michalis
  • 6,686
  • 13
  • 52
  • 78
90
votes
7 answers

How do I set the baseUrl for Angular HttpClient?

I did not find a way in the documentation to set the base API URL for HTTP requests. Is it possible to do this with the Angular HttpClient?
Stepan Suvorov
  • 25,118
  • 26
  • 108
  • 176
81
votes
9 answers

Angular: How to download a file from HttpClient?

I need download an excel from my backend, its returned a file. When I do the request I get the error: TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. My code…
Jean Carlos
  • 1,613
  • 3
  • 18
  • 26
79
votes
5 answers

Angular 4 Error: No provider for HttpClient

I am starting a new angular project with the CLI and am running into a no provider for HttpClient error. I have added HttpClientModule to my module imports which seems to be the usual culprit in this scenario. Not finding a lot online other than…
mrpotocnik
  • 1,101
  • 1
  • 10
  • 15
63
votes
3 answers

How to add a body to Angular HttpClient delete function

Our project is migrating to Angular4, and use @angular/common/http Httpclient as the default network tool. But I found there are no body params in delete function. How do I add the body to delete function? Thanks.
Hongyang Du
  • 699
  • 1
  • 6
  • 9
53
votes
7 answers

How to add multiple headers in Angular 5 HttpInterceptor

I'm trying to learn how to use HttpInterceptor to add a couple of headers to each HTTP request the app do to the API. I've got this interceptor: import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler,…
Fel
  • 4,428
  • 9
  • 43
  • 94
53
votes
1 answer

How to mock Angular 4.3 httpClient an error response in testing

I have a below interceptor auth-interceptor.service.ts import {Injectable, Injector} from '@angular/core'; import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'; import {Observable} from…
52
votes
7 answers

HTTPClient POST tries to parse a non-JSON response

I'm trying to make a request in Angular and I know that the HTTP response will not be in JSON but in text. However, Angular seems to be expecting a JSON response since the error is the following: SyntaxError: Unexpected token < in JSON at position…
Inês
  • 587
  • 1
  • 4
  • 10
52
votes
12 answers

Angular 2: How to access an HTTP response body?

I wrote the following code in Angular 2: this.http.request('http://thecatapi.com/api/images/get?format=html&results_per_page=10'). subscribe((res: Response) => { console.log(res); }) When I print the response I get in console:…
CrazySynthax
  • 13,662
  • 34
  • 99
  • 183
51
votes
5 answers

Angular HttpClient missing response headers

I am trying to get into angular lately. I have a paginated request. const myParams = new HttpParams().set('page', page.toString()).set('size', size.toString()); this.http.get>('https://localhost:8443/user/', { headers: new…
Mr.H.
  • 965
  • 1
  • 10
  • 18
1
2 3
96 97