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
-1
votes
1 answer

Problems with HttpInterceptor for jwt token refreshing in Angular 9

I'm using jwt for authentication. I'm having trouble with the refreshing. Probably I think it's due to my lack of experience in rxjs observables and operators. I get the refresh token from my backend using these methods of my auth.service.ts …
-1
votes
1 answer

get request "No overload matches this call" Angular HttpClient

I have a GET method in my backend where I send a request body as input and get a list of results as return. Now in my frontend I have: search(cat: Cat): Observable { return this.httpClient.get(this.messageBaseUri+'/search',…
cheshire
  • 1,109
  • 3
  • 15
  • 37
-1
votes
1 answer

Map HttpClient response data while returning an HttpResponse

In my service I always convert the JSON to an actual class type using rxjs like so. get(id: UUID): Observable { return this.http.get(`${this.baseUrl}/${id}`) .pipe( map(x => OrderDTO.fromJson(x)) …
Gargoyle
  • 9,590
  • 16
  • 80
  • 145
-1
votes
1 answer

the call to service is not executed

in ngOnInit, I call a service to get the token, but it doesn't work, it's like that part of the code is omitted, it doesn't appear in the network requests, the service works because I use it in another component later, but I need to use it now from…
Franavi
  • 47
  • 8
-1
votes
2 answers

Angular httpClient

My problem is that I get this error when using httpClient from angular: ERROR DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL at https://localhost:xxxx/polyfills.js:5749:31 Code for http request in angular: return…
Alex Alexa
  • 107
  • 9
-1
votes
1 answer

Angular RxJS combine multiple dependant GET requests when first request returns

Let's say I have a Student with two properties: courseIds, courses. export interface IStudent { courseIds: number[]; courses: ICourse[]; } export interface ICourse { name: string; } When the page loads I issue a GET request to retrieve a…
Alias
  • 341
  • 2
  • 3
  • 14
-1
votes
1 answer

How to sync data between same web page on different browsers using Angular 8

I have created an angular application where I am receiving data using Angular HttpClient which is consuming REST API , the data received is the values which I have to display in the the page which is just a form. If I edit the data and click on…
Shailesh Prajapati
  • 458
  • 2
  • 7
  • 20
-1
votes
1 answer

How to use *application/x-www-form-urlencoded* in angular 8 HTTP request with codigniter API

Here we will tell you the solution for call HTTP client POST request in angular 8
-1
votes
5 answers

map extra property to model in Angular http response

I have a model named Blog export interface Blog { id: number, subject: string } I want to make a http request as below : public model: Blog = { id: null, subject: "" }; constructor(private http: HttpClient) { } ngOnInit(): void { …
user12539811
-1
votes
2 answers

fetching npm registry with angular httpClient causing CORS

I am trying to use angular httpClient to access npm registry to get specific package dependencies When I am doing the request I am getting CORS error Access to XMLHttpRequest at 'https://registry.npmjs.org/async/2.0.1' from origin…
Zakk
  • 758
  • 3
  • 11
  • 20
-1
votes
1 answer

The host and port are duplicated in an http.get request

I have some Angular code that is trying to use a web API set up locally using the Express router. The router listens to http://localhost:5000/api/products. I can verify that this URL is correct as I can test using Postman and I get the correct…
Kevin Burton
  • 2,032
  • 4
  • 26
  • 43
-1
votes
1 answer

Post method in Reactive Forms Angular 8

I created My Reactive Form called Compaign and Im almost done from the back end part! Im working on the frontend !! I want to register the form via my UI However it turns out an error of connection localhost:3000/api/register! I tried it via my…
Zakaria Belassal
  • 101
  • 2
  • 10
-1
votes
1 answer

Change response type for http.post

I have a post method using Angular's HttpClient. I'm trying to subscribe to the response so I can do a few things after but I'm getting this error: Error: Uncaught (in promise): HttpErrorResponse:…
MrRobot
  • 1,001
  • 1
  • 14
  • 34
-1
votes
1 answer

How to embed third party javascript widgets from Cloudinary dynamically in Angular?

I get a CORS error when I'm trying to download and use a Cloudinary widget javascript resource with the Angular HttpClient. What is going on? I'm not new to HttpClient or CORS but have never seen this. Access to XMLHttpRequest at…
Preston
  • 3,260
  • 4
  • 37
  • 51
-1
votes
1 answer

how to get public IP in Angular Project

how to get public IP in Angular Project? Is there any method or URL for getting public IP from the client-side. Below, I listed the code was I used. but I can't subscribe to that response. this.httpService.get<{ ip: string }> …
Paul Cheriyan
  • 638
  • 9
  • 19