Express receiving empty object

Question

I am trying to connect Angular 2 to Express. I have already setup and test the server endpoint using Postman (content type seems to be x-www-form-encoded for it to work) but other than that i do not know if there is any special config for angular 2 to carry that request. My guess its that the content-type is not correct or something.

form.ts

import {Component, ViewEncapsulation} from "angular2/core";
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, AbstractControl, Validators, Control} from "angular2/common";
import { Http } from "angular2/http";

@Component({
    selector: "parameters-form",
    directives: [FORM_DIRECTIVES],
    templateUrl: "dev/form.template.html"
})
export class ParametersForm {
  myForm: ControlGroup;

  systemParameters: AbstractControl;
  param: AbstractControl;
  liftOperator: AbstractControl;
  restrictOperator: AbstractControl;
  xInitial: AbstractControl;

  system_arr: number[];
  param_arr: number[];
  restrict_arr: number[];
  lift_arr: number[];
  xinitial_arr: number[];

  constructor(fb: FormBuilder, private _http: Http) {
    this.myForm = fb.group({
      "realisations" : ["", Validators.required],
      "numConstSteps" : ["", Validators.required],
      "timeHorizon": ["", Validators.required],
      "continuationStep" : ["", Validators.required],
      "continuationStepSign" : ["", Validators.required],
      "numberOfModelParameters" : ["", Validators.required],
      "systemParameters" : [""],
      "param" : [""],
      "netLogoFile" : ["", Validators.required],
      "numberOfModelVariables" : ["", Validators.required],
      "restrictOperator" : [""],
      "liftOperator" : [""],
      "xInitial" : [""]

    });
    this.system_arr = [];
    this.param_arr = [];
    this.restrict_arr = [];
    this.lift_arr = [];
    this.xinitial_arr = [];
    this.param = this.myForm.controls["param"];
    this.systemParameters = this.myForm.controls["systemParameters"];
    this.restrictOperator = this.myForm.controls["restrictOperator"];
    this.liftOperator = this.myForm.controls["liftOperator"];
    this.xInitial = this.myForm.controls["xInitial"];
  }

  addToArray(event, value: number, target: string): void {
    if (event.which === 13) {

      switch (target) {
        case "systemParameters":
          this.system_arr.push(value);
          (<Control>this.systemParameters).updateValue("");
          break;
        case "param":
          this.param_arr.push(value);
          (<Control>this.param).updateValue("");
          break;
        case "liftOperator":
          this.lift_arr.push(value);
          (<Control>this.liftOperator).updateValue("");
          break;
        case "restrictOperator":
          this.restrict_arr.push(value);
          (<Control>this.restrictOperator).updateValue("");
          break;
        case "xInitial":
          this.xinitial_arr.push(value);
          (<Control>this.xInitial).updateValue("");
          break;

      }
    }
  }

  deleteItem(value: any, target: string): void {
    let pos = 0;
    switch (target) {
      case "systemParameters":
        pos = this.system_arr.indexOf(value);
        this.system_arr.splice(pos, 1);
        break;
      case "param":
        pos = this.param_arr.indexOf(value);
        this.param_arr.splice(pos, 1);
        break;
      case "liftOperator":
        pos = this.lift_arr.indexOf(value);
        this.lift_arr.splice(pos, 1);
        break;
      case "restrictOperator":
        pos = this.restrict_arr.indexOf(value);
        this.restrict_arr.splice(pos, 1);
        break;
      case "xInitial":
        pos = this.xinitial_arr.indexOf(value);
        this.xinitial_arr.splice(pos, 1);
        break;

    }
  }

  isFullfilled(m: number, n: number) {

    if (
          m == this.restrict_arr.length
          && m == this.xinitial_arr.length
          && m == this.lift_arr.length
          && n == this.param_arr.length
          && n == this.system_arr.length
       ) {
         if (m != 0 && n != 0 ){
           return true;
         }

       }

       return null;
  }
  onSubmit(form: any): void {
    let form = form;
    form.systemParameters = this.system_arr;
    form.liftOperator = this.lift_arr;
    form.restrictOperator = this.restrict_arr;
    form.param = this.param_arr;
    form.xInitial = this.xinitial_arr;

    this._http.post("http://localhost:3001/export", form).subscribe();
    console.log("your submitted value:", form);
  }

}

server.js

var express = require('express');
var bodyParser = require('body-parser')
var cors = require('cors');

var app = express();
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/export', function(req, res){
  var body = req.body;
  res.send(body);
  console.log(body);
});

app.listen("3001", function(){
  console.log("Express server running on localhost:3001");
});

Thierry Templier Thierry Templier · Accepted Answer · 2016-03-09T16:29:18

You need to set explicitly the Content-Type header. Angular2 won't set it under the hood for you at the moment.

var headers = new Headers();
headers.append('Content-Type', 'x-www-form-encoded');
this._http.post("http://localhost:3001/export", form, {
  headers: headers
}).subscribe();

Moreover you need to leverage the URLSearchParams class to build the body and convert it as a string. At the moment, the body can only be provided as a string to the post / put / patch method of the Http class.

var form = new URLSearchParams();
form.set('systemParameters', this.system_arr);
form.set('liftOperator', this.lift_arr);
(...)

this._http.post("http://localhost:3001/export", form.toString(), {
  headers: headers
}).subscribe();

Don't forget to import the Headers class:

import {Http, Headers} from 'angular2/http';

Express receiving empty object

1 Answers