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
33
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
  • 6,781
  • 8
  • 36
  • 61
32
votes
4 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
  • 705
  • 2
  • 8
  • 17
30
votes
5 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,621
  • 4
  • 25
  • 42
29
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
  • 423
  • 1
  • 6
  • 12
28
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.
  • 659
  • 1
  • 8
  • 13
25
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
  • 3,889
  • 8
  • 36
  • 60
24
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
  • 5,442
  • 6
  • 36
  • 70
24
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…
23
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); …
20
votes
6 answers

How to exclude some services like login, register from interceptor Angular 5, HttpClient

i wanted to exclude some services using interceptor. app.module.js providers: [ UserService, RolesService, { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }, ], Login.service.ts return…
Haneep CR
  • 261
  • 1
  • 2
  • 5
20
votes
5 answers

Angular can't use HttpClient in external library

When I try to instantiate the HttpClient service in an external library, then consume that library in an Angular application, I'm getting StaticInjectorError errors: With Angular 5.0.0: AppComponent_Host.ngfactory.js? [sm]:1 ERROR Error: …
Mike
  • 4,008
  • 18
  • 35
18
votes
5 answers

Angular 5 caching http service api calls

In my Angular 5 app a certain dataset (not changing very often) is needed multiple times on different places in the app. After the API is called, the result is stored with the Observable do operator. This way I implemented caching of HTTP requests…
Herman Fransen
  • 1,938
  • 4
  • 21
  • 38
18
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…
Arne Lecoutre
  • 295
  • 1
  • 2
  • 8
18
votes
5 answers

Angular - HttpClient: Map Get method object result to array property

I am calling an API that returns a JSON Object. I need just the value of the array to map to a Observable . If I call api that just returns the array my service call works. Below is my sample code .. // my service call .. import { Injectable }…
Netwobble
  • 269
  • 1
  • 2
  • 6
17
votes
1 answer

How to slow down / wait before call to my api?

Merry Christmas to you mate. My Angular 4 app will not await. I want to slow down before API I call. but I just continue to hit a wall. I'm using a HttpInterceptor in my code. but these Observable will just explode. To not get too much…
1
2
3
85 86