angular2, post form to backend restful error: Unexpected end of JSON input
<p>I'm getting this error:</p>

<p>accounts.service.ts?29fe:45 SyntaxError: Unexpected end of JSON input.
it's like the server don't like json format.</p>

<p>when i use Postman to send with x-www-form_urlencoded the two fields: lastname and firstname is working well. </p>

<p>I don't understand well the conversion that i must to do to work right with the backend, there is backend with  x-www-form_urlencoded  and another with full json? because most of tutorials dont'use any sort of conversion to send post data from the form.
i've seen some solutiosn using new URLSearchParams(); but there nothing automatic in angular2 to do the conversion?</p>

<p>From my server log when i send the post with Postman i get:</p>

<pre><code>add: {"lastname":"mylast","firstname":"myfirst"}
</code></pre>

<p>but with angular2 component i get:</p>

<pre><code>add: {}
</code></pre>

<p>the data is not arriving </p>

<p>I have this component:</p>

<pre><code>import {Component, Input, OnInit} from '@angular/core';
import {AccountsService} from '../shared/index';


@Component({
    selector: 'app-accounts-form',
    templateUrl: 'accounts-form.component.html',
    styles: [require('./accounts-form.component.scss')],
    providers: [AccountsService]

})
export class AccountsFormComponent implements OnInit {
    @Input() accountId: string = '';
    public account: any =       {
        firstname: '',
        lastname: ''
    };

    constructor(private accountsService: AccountsService    ) {
    }

    ngOnInit() {

        if (this.accountId !='' ) {
            this.getById();
        }
    }

    onSubmit() {
        if (this.accountId =='' ) {
            console.log('submit new');
            this.accountsService
                .insert(this.account)
                .subscribe((data) =&gt; {
                        console.log(data);
                        this.account = data
                    },
                    error =&gt; console.log(this.account),
                    () =&gt; console.log('Insert complete'));

        } else {
            console.log('submit update '+this.accountId);
        }

    }


    private getById(): void {

        this.accountsService
            .getById(this.accountId)
            .subscribe((data) =&gt; {
                    console.log(data);
                    this.account = data
                },
                error =&gt; console.log(this.account),
                () =&gt; console.log('Get Item complete'));


    }

}
</code></pre>

<p>the template: </p>

<pre><code>&lt;form (ngSubmit)="onSubmit()"&gt;
&lt;div class="form-group"&gt;
  &lt;label for="lastname"&gt;Last Name&lt;/label&gt;
  &lt;input [(ngModel)]="account.lastname"  name="lastname"/&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
  &lt;label for="firstname"&gt;First Name&lt;/label&gt;
  &lt;input [(ngModel)]="account.firstname"  name="firstname"/&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;button type="submit" class="btn btn-default"
          &gt;Submit&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>the service:</p>

<pre><code>import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs';
import { Configuration } from '../../app.constants';

@Injectable()
export class AccountsService {
  private actionUrl: string;
  private headers: Headers;

  constructor(private http: Http, private configuration: Configuration) {

      this.actionUrl = configuration.ServerWithApiUrl + 'accounts';

      this.headers = new Headers();
      this.headers.append('Content-Type', 'application/json');
            this.headers.append('Accept', 'application/json');
  }


    public insert(body: any): Observable&lt;any&gt; {
        console.log( 'insert url:'+ this.actionUrl  );
        console.log(JSON.stringify( body))
        return this.http.post(this.actionUrl , JSON.stringify( body),  { headers: this.headers })
            .map((response: Response) =&gt;  response.json())
            .catch(this.handleError);
    }

  private handleError(error: Response) {
      console.error(error);
      return Observable.throw(error.json().error || 'Server error');
  }

}
</code></pre>

<p>my backend server with mongo and express4:</p>

<pre><code>const insert = function (req, res) {
    data = req.body;
    console.log('add: ' + JSON.stringify(data));
    objectDb.insertOne(data, function (err, result) {
        if (err) {
            res.send({'error': 'An error has occurred'});
        } else {
            res.send(result[0]);
        }
    });

};
</code></pre>

<p>i've tried on my service don't use form value but hardcode values with &amp; and json value , and does not work:</p>

<ol>
<li><p>try send data  with &amp;</p>

<p>return this.http.post(this.actionUrl ,  'firstname&amp;=test1&amp;lastname=test2',  { headers: this.headers })
    .map((response: Response) =>  response)
    .catch(this.handleError);</p></li>
<li><p>try send data with json</p>

<pre><code>return this.http.post(this.actionUrl ,  {'firstname':'test1','lastname':'test2'},  { headers: this.headers })
    .map((response: Response) =&gt;  response)
    .catch(this.handleError);
</code></pre></li>
</ol>

<p>boths methods  does not work</p>

<p>UPDATE:</p>

<p>I've changed insert() my service:</p>

<pre><code>.map((response: Response) =&gt;  response.json()) &lt;-- removed .json() here;
</code></pre>

<p>have no more the error: 'Unexpected end of JSON input' just data is not sent to the server.</p>

<p>i've update to get the log of response: </p>

<pre><code>.map((response: Response) =&gt; console.log(response))
</code></pre>

<p>then i get the new error:</p>

<pre><code>core.umd.js?e2a5:2837 EXCEPTION: Error in ./AccountsFormComponent class AccountsFormComponent - inline template:3:9 caused by: Cannot read property 'lastname' of undefinedErrorHandler.handleError
</code></pre>

<p>actual updated insert() function in service code:</p>

<pre><code>public insert(body: any): Observable&lt;any&gt; {
    console.log( 'insert url:'+ this.actionUrl  );
    console.log(JSON.stringify( body))
    return this.http.post(this.actionUrl ,  {'firstname':'test1','lastname':'test2'},  { headers: this.headers })
        .map((response: Response) =&gt; console.log(response))
        .catch(this.handleError);
}
</code></pre>

<p>on developper tool xhr tab i get:</p>

<pre><code>Request URL:http://localhost:3000/accounts
Request Method:POST
Status Code:200 OK
Remote Address:[::1]:3000
Response Headers
view source
Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Length:0
Date:Thu, 01 Dec 2016 14:21:04 GMT
X-Powered-By:Express
Request Headers
view source
Accept:application/json
Accept-Encoding:gzip, deflate, br
Accept-Language:de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4,fr;q=0.2
Connection:keep-alive
Content-Length:40
Content-Type:application/json
Host:localhost:3000
Origin:http://localhost:8080
Referer:http://localhost:8080/accounts-add
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36
Request Payload
view source
{firstname: "test1", lastname: "test2"}
firstname
:
"test1"
lastname
:
"test2"
</code></pre>