HttpClient leading to error

Question

I am using Angular 4 and want to start using HttpClient. However I get JSON parsing error and after alot of searching I have not been able to fix it yet.

Old method

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { _throw } from 'rxjs/observable/throw';
import { AppConfig } from '../config/app.config';
import { AuthenticateService } from '../security/shared/authenticate.service';
import { IFlower } from './flower.model';

addFlower(Flower: IFlower): Observable<any> {
    this._auth.checkToken();
    const headers = new Headers();
    this.createAuthorizationHeader(headers, this._auth.token);
    headers.append('Content-Type', 'application/json');
    this.options = new RequestOptions({ headers: headers });
    return this._http.post(this.apiUrl + 'flower/insert', JSON.stringify(Flower),
        this.options).map((res: Response) => <any>res).catch(this.handleError);
}

Converting to HttpClient

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { _throw } from 'rxjs/observable/throw';
import { AppConfig } from '../config/app.config';
import { AuthenticateService } from '../security/shared/authenticate.service';
import { IFlower } from './flower.model';

    addFlower(Flower: IFlower): Observable<any> {
        this._auth.checkToken();
        const httpOptions = {
            headers: new HttpHeaders({
                'Authorization': 'Bearer ' + this._auth.token,
                'Content-Type':  'application/json'
            })
        };

        return this._http.post<any[]>(this.apiUrl + 'flower/insert', JSON.stringify(Flower), httpOptions)
            .pipe(
                catchError(this.handleError)
            );
    }

On converting to HttpClient I get the following error message

Backend Controller code:

[HttpPost]
[Route("insert")]
public HttpResponseMessage AddFlower(Flower flower)
{
    try
    {
        _flowerervice.AddFlower(flower, token));
        return Request.CreateResponse(HttpStatusCode.Created);
        throw new HttpResponseException(Request.CreateErrorResponse(HttpStatusCode.Forbidden, "Forbidden"));
    }
    catch (Exception exception)
    {
        throw ExceptionMessageUtility.HttpResponse(Request, exception);
    }
}

I have been looking around SO and other sources. This SO post explains HttpClient but this still does not resolve my error. Any help is highly appreciated. Thanks

score 2 · Accepted Answer · answered Jul 01 '18 at 05:06

A recent breaking-change in Angular's HttpClient means that deserializing a JSON body with HTTP 200 OK responses with empty content now trigger this "unexpected end of data at ... of the JSON data" error because it should be using HTTP 204 No Content. See here: https://github.com/angular/angular/issues/20879

There are 3 possible fixes:

Change your web-service so it returns HTTP 204 with an empty body.
Change your web-service so it returns HTTP 200 with a non-empty body.
Change your client code so it will return the empty response as a string instead of attempting to deserialize it as JSON (set { responseType: "text" }).

Dai, thank you for the response. I will try to post a response after testing all 3 scenarios. — Maddy, Jul 01 '18 at 05:13

HttpClient leading to error

1 Answers1