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.

1282 questions
233
votes
5 answers

Difference between HttpModule and HttpClientModule

Which one to use to build a mock web service to test the Angular 4 app?
Aiyoub
  • 4,703
  • 6
  • 22
  • 34
209
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
  • 2,749
  • 4
  • 12
  • 22
168
votes
8 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
  • 6,536
  • 5
  • 19
  • 36
146
votes
12 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…
LastTribunal
  • 5,105
  • 7
  • 31
  • 61
139
votes
8 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,073
  • 3
  • 14
  • 23
63
votes
6 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
  • 21,636
  • 25
  • 93
  • 166
54
votes
6 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,243
  • 3
  • 14
  • 26
54
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
  • 851
  • 1
  • 8
  • 15
52
votes
4 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
  • 569
  • 1
  • 5
  • 9
48
votes
11 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
  • 9,442
  • 21
  • 70
  • 136
42
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…
41
votes
4 answers

Property 'json' does not exist on type 'Object'

I'm trying fetch data via REST with angular 2 HttpClient. I'm following the angular tutorial here https://angular.io/tutorial/toh-pt6 and under the Heroes and HTTP section you'll see this snippet of code used to fetch hero data via…
Stylishcoder
  • 995
  • 1
  • 7
  • 19
38
votes
6 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
  • 3,126
  • 5
  • 30
  • 67
34
votes
3 answers

Angular (5) httpclient observe and responseType: 'blob'

Context: I'm trying to download a binary file from a backend (that requires some data posted as json-body) and save it with file-saver using the filename specified by the backend in the content-disposition header. To access the headers I think I…
Chris
  • 1,148
  • 1
  • 9
  • 29
33
votes
6 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…
Amy
  • 427
  • 1
  • 4
  • 10
1
2 3
85 86