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
51
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,508
  • 1
  • 11
  • 30
46
votes
5 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
  • 1,142
  • 1
  • 11
  • 21
44
votes
1 answer

Angular HttpClient append headers to HttpHeaders

I am upgrading from the HttpServer to the HttpClientService and as part of that I have to switch my headers from Headers to HttpHeaders. However For some reason my custom headers are no longer being appended. What do I need to update to have the…
efarley
  • 8,371
  • 12
  • 42
  • 65
41
votes
5 answers

Angular HttpClient Get method with body

I'm improving an existing API, and the requirement is to provide a single get method which can accept multiple search criteria and based on those criteria perform the query. I'm using Spring MVC. The get method…
Bruno Miguel
  • 1,003
  • 3
  • 13
  • 26
37
votes
3 answers

How to handle unauthorized requests(status with 401 or 403) with new httpClient in angular 4.3

I have an auth-interceptor.service.ts to handle the requests import {Injectable} from '@angular/core'; import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'; import {Observable} from…
33
votes
3 answers

How to catch error in Observable.forkJoin(...)?

I use Observable.forkJoin() to handle the response after both HTTP calls finishes, but if either one of them returns an error, how can I catch that error? Observable.forkJoin( this.http.post(URL, jsonBody1, postJson) .map((res) => res), …
matchifang
  • 5,190
  • 12
  • 47
  • 76
33
votes
6 answers

Angular HttpClient return expecting observable rather than observable

I'm getting a compilation error on the return type when using HttpClient. In my function GetPortfolio, I'm expecting the GET call to return the json object of type Observable but it's giving the error: Type…
roverred
  • 1,841
  • 5
  • 29
  • 46
31
votes
5 answers

Parse date with Angular 4.3 HttpClient

I'm currently switching to the new HttpClient of Angular 4.3. One advantage is that I can specify a type info on the GET method and that the returned JSON is parsed into the given type, e.g. this.http.get (url).subscribe(...) But…
Ralf Schneider
  • 651
  • 1
  • 8
  • 15
30
votes
2 answers

How to add headers to my Angular post request?

For a school project I need to make a simple login page with Angular. When a login button is clicked I need to add an Authorization header with my post. I created a backend and when I post my Authorization value to that backend with postman it works…
LecArne
  • 417
  • 1
  • 4
  • 9
28
votes
4 answers

Angular 4/5 HttpClient: Argument of type string is not assignable to 'body'

The Angular docs say: The response body doesn't return all the data you may need. Sometimes servers return special headers or status codes to indicate certain conditions, and inspecting those can be necessary. To do this, you can tell…
Phil
  • 7,065
  • 8
  • 49
  • 91
28
votes
3 answers

Use a promise in Angular HttpClient Interceptor

Can I use promise within HttpInterceptor? For example: export class AuthInterceptor implements HttpInterceptor{ this.someService.someFunction() .then((data)=>{ //do something with data and then return next.handle(req); …
27
votes
1 answer

Which RxJS operator to choose to handle HTTP errors: tap or catchError?

/* error handler that will be used below in pipe with catchError() * when resource fetched with HttpClient get() */ private _handleError (operation: string, result?:T) { return( error: any): Observable => { console.error(…
yactouat
  • 457
  • 1
  • 7
  • 14
24
votes
2 answers

Order of HttpInterceptors

I have a application that uses a plugin that register a HttpInterceptor. Now I need to create my own interceptor that need to be run before the other interceptor because it will change some values, in localStorage, that the other interceptor…
Fernando
  • 2,131
  • 3
  • 27
  • 46
24
votes
8 answers

Angular 5 Jasmine Error: Expected one matching request for criteria found none

I have a very simple service call and a jasmine test for it. Service call: myServiceCall(testId: number) : void { const url = `${this.url}/paramX/${testId}`; this.http.put(url, {},{headers: this.headers}).subscribe(); } My Test…
mrkernelpanic
  • 4,268
  • 4
  • 28
  • 52
24
votes
3 answers

Angular - Interceptor not loading in a lazy loaded module

I have created an interceptor which appends a token to the authorization header only needed for API calls made within a feature lazy loaded module. However, I don't think the interceptor is being called as no console.logs are being displayed when…
Kay
  • 17,906
  • 63
  • 162
  • 270
1
2
3
96 97