How to do a proper http post call in Angular 2?

Question

I'm starting out with Angular 2 and I want to do a post call to my node.js server to update data. This is the code in my service:

updateEmployee(id : string, firstName? : string, lastName? : string){
    let body : string = JSON.stringify({ "firstName" : "test", "lastName" : "testtwo"});

    return this.http.post(this._employeesUrl + id, body)
      .map(res => res.json())
      .catch(this.handleError);
  }

My API route code:

exports.update = function(req, res) {
  Employee.model.findById(req.params.id).exec(function(err, item) {

    if (err) return res.apiError('database error', err);
    if (!item) return res.apiError('not found');
    console.log(req);
    var data = (req.method == 'POST') ? req.body : req.query;

    item.getUpdateHandler(req).process(data, function(err) {

      if(req.body.firstName){
        item.firstName = req.firstName;
      }
      if(req.body.lastName){
        item.lastName = req.body.lastName;
      }

      if (err) return res.apiError('create error', err);

      res.apiResponse(
        200
      );

    });

  });
}

When I do a post call with postman, everything works fine, but in Angular 2 I don't seem to get the body parameter across. How is this done in a right way? I tried many things but none of them worked.

I tried adding the headers in the options but that didn't resolve the problem:

I would try to do it with jQuery ajax or directly with plain simple javascript request, just to be sure everything is fine, because the angular2 code looks fine and I see you get a 404 not found which mean a server issue. — Tiberiu Popescu, May 03 '16 at 18:30
ah, true, it's a bit tricky to use jQuery with angulr. No, sadly you cannot just import it : http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2 . But you can just add the jQuery script in the HTML header and try the request from the console :) — Tiberiu Popescu, May 03 '16 at 19:38

score 2 · Answer 1 · answered May 03 '16 at 18:09

2

You have to add the content-type header.

updateEmployee(id : string, firstName? : string, lastName? : string){
    let body : string = JSON.stringify({ "firstName" : "test", "lastName" : "testtwo"});
    let headers = new Headers({ 'content-type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this._employeesUrl + id, body, options)
      .map(res => res.json())
      .catch(this.handleError);
  }

answered May 03 '16 at 18:09

rgvassar

5,635
1
24
31

I already tried this, and got an error when the browser tries to do the request. I added a screenshot in the OP. – stijn.aerts May 03 '16 at 18:14

score 0 · Accepted Answer · answered May 04 '16 at 19:23

I needed to add the headers as rgvassar said:

let body : string = JSON.stringify({ "firstName" : firstName, "lastName" : lastName});
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this.http.post(this._employeesUrl + id, body, options) 
    .map((res: Response) => res)

But there was also a CORS problem on my API (made with Keystonejs), because I send a header with the request, I needed to allow the OPTIONS on CORS. This 2 things resolved the issue.

How to do a proper http post call in Angular 2?

2 Answers2