API Gives Header 400 & Angular Stops Working

I have an API built on Laravel 5.0 that communicates with Angular on the front end. Whenever a user enters wrong data, API gives an error response with a status code of 400 (Bad Request), an error appears on the Developer's Console and this causes Angular to stop working anymore.

This is a sample error response from the API side:

$response = array();
$response['error'][] = $error;
$response['status'] = 400;
return (new Illuminate\Http\Response($response, $response['status']))
    ->header('Content-Type', 'application/json');

Angular gets the error as follows:

sampleRequest(sample_var: number){
    const url = `${this.apiUrl}`;

    return this.http
        .post(url, JSON.stringify({var: sample_var}), {headers: this.headers})
        .toPromise()
        .then(this.extractData)
        .catch(this.handleError);
}

private handleError (error: Response | any) {
    let errMsg: string;

    if (error instanceof Response) {
        const body = error.json() || '';

        errMsg = (body.error) ? body.error || JSON.stringify(body) : $.map(body, function(value, index){ return [value]; });
    }

    else
        errMsg = error.message ? error.message : error.toString();

    return Observable.throw(errMsg);
}

To be clear, I have a validation on the API side that checks whether variable var is number or not, for instance. User enters a string on the associated input field and API gives an error response as mentioned at the beginning.

An error as below appears on the developer's console:

zone.js:1990 POST example.com/api/sample-request 400 (Bad Request)

After that error, Angular stops working, like when javascript stops working if a javascript error occurs.

Interestingly, it does not stop working if the thrown error has a status code of 500 (Internal Server Error).

Any help is appreciated.

via Chebli Mohamed