Post to API with Angular's HttpClient

Question

On an Angular 7 application I am calling a service:

  this.messageService.send(model).pipe(

    catchError(err => {
      console.log('Error:', err);
      return err;
    }),

    map((response: Response) => {
      console.log(response);
    })

  );

The service method calls an API:

public send(model: Model): Observable<Response> {

  const headers: HttpHeaders = new  HttpHeaders();
  headers.set('Content-Type', 'application/x-www-form-urlencoded');

  console.log(model);

  return this.httpClient.post<Response>>(`send`, model, { headers: headers });

}

I am able to see the model on the Console when I do console.log(model);

But a breakpoint I have on the API does not fire and I don't get any error in catchError.

The API action is ASP.NET Core 2.2. as follows:

[HttpPost("send")]
public async Task<IActionResult> Send([FromBody]Model model) {

  return Ok();

}

NOTE:
On this same application I am able to use httpClient with get method without a problem.

Not sure what I am missing. Any idea?

UPDATE

I changed the Angular service code to:

public send(model: Model): Observable<Response>> {

  const headers: HttpHeaders = new  HttpHeaders();
  headers.set('Content-Type', 'application/json');

  console.log(model);

  return this.httpClient.post<Response>>(`send`, JSON.stringify(model), { headers: headers });

}

Still not working.

This is an Angular problem as I just Posted JSon data with Postman.

It worked using Postman and without any kind authentication / authorisation.

It looks like you don't actually subscribe to the observable, so the request never gets made. — Kirk Larkin
– Kirk Larkin, Commented Feb 21, 2019 at 17:27
Do I need to subscribe here: this.messageService.send(model).pipe(...)? — Miguel Moura
– Miguel Moura, Commented Feb 21, 2019 at 17:30
Yeah. .subscribe() on the end of that. For what you're doing, you would be better off only using subscribe but with the next and error callbacks. — Kirk Larkin
– Kirk Larkin, Commented Feb 21, 2019 at 17:31
@Miguel Moura Forgive me If I'm wrong (as I am not two familiar with Angular 7) but is that a typo? the two angle brackets here: <Response>> Should it not be just one like this? <Response> — Sarah
– Sarah, Commented Feb 21, 2019 at 17:31
Possible duplicate of Angular 2 http.post() is not sending the request — Igor
– Igor, Commented Feb 21, 2019 at 18:31

Luciano Cardoso Lima · Accepted Answer · 2019-02-21 17:18:39Z

1

try see the output window on visual studio. maybe there are some info about the problem. verify if the controller has the AthorizationAttribute. verify the Content-Type', 'application/x-www-form-urlencoded', try change it to 'Content-Type': 'application/json'

answered Feb 21, 2019 at 17:18

Luciano Cardoso Lima

592 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miguel Moura Over a year ago

I added an update with the change you mention but still no luck. And it is working with postman.

Collectives™ on Stack Overflow

Post to API with Angular's HttpClient

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related