Issue in handling Http Response with status: 200 from an Angular 6

Question

As I tried to upload an image via API scripted in PHP, once after uploading succeded into the following directory getting HttpErrorResponse code with status: 200

upload-image.component.ts

OnSubmit(Caption,Image){
   this.imageService.postFile(Caption.value,this.fileToUpload)
   .subscribe(
     data =>{
      // this.heroes.push(hero);
       console.log(data);
       Caption.value = null;
       Image.value = null;
       this.imageUrl = "/assets/img/default-image.png";
     },
     err => {
       this.errorMsg = <any>err;
       console.log(err);
     }
   );
}

upload-image.service

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
...

postFile(caption: string, fileToUpload: File): Observable<any> {
    const endpoint = 'http://localhost/angular6/fileUpload.php';
    const formData: FormData = new FormData();
    formData.append('selectFile', fileToUpload, fileToUpload.name);
    formData.append('ImageCaption', caption);
    return this.http
      .post<any>(endpoint, formData)
      .pipe(tap(
        res=>{
          console.log('server data '+res)
        },
        catchError( this._errorHandler)
        // err=> console.log(err)
      ))
}

private _errorHandler(error: Response) {
    console.error('Error Occured: ' + error);
    return Observable.throw(error || 'Some Error on Server Occured');

}

But the image was uploading successfully. But even after the upload is completed, as I'm getting HTTP error response

By looking at the above two codes by consoling the logs generated after submit is as follows:

catchError(this._errorHandler) i.e, by catching the error from the console prints like this below

TypeError: source.lift is not a function
    at TapSubscriber.catchErrorOperatorFunction [as _tapError] (catchError.js:8)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:55)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js:13)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._error (InnerSubscriber.js:18)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)

err => console.log(err) Results in HttpErrorResponse

upload-image.component.ts:42 
HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost/angular6/fileUpload.php", ok: false, …}
error:
error: SyntaxError: Unexpected token h in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:7454:51) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2743:31) at Object.onInvokeTask (http://localhost:4200/vendor.js:36912:33) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2742:36) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2510:47) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2818:34) at invokeTask (http://localhost:4200/polyfills.js:3862:14) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:3888:17)
message: "Unexpected token h in JSON at position 0"
stack: "SyntaxError: Unexpected token h in JSON at position 0↵    at JSON.parse (<anonymous>)↵    at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:7454:51)↵    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2743:31)↵    at Object.onInvokeTask (http://localhost:4200/vendor.js:36912:33)↵    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2742:36)↵    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2510:47)↵    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2818:34)↵    at invokeTask (http://localhost:4200/polyfills.js:3862:14)↵    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:3888:17)"
__proto__: Error
constructor: ƒ SyntaxError()
message: ""
name: "SyntaxError"
toString: ƒ toString()
__proto__: Object
text: "http://localhost/angular4/uploads/153744221629Koala.jpg"
__proto__: Object
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for http://localhost/angular4/fileUpload.php"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost/angular4/fileUpload.php"
__proto__: HttpResponseBase

How am I supposed to code in order to handle and get successful Http Response message with the name of the image that was successfully uploaded?

Edited:

$ npm list --depth=0
[email protected] C:\xampp\htdocs\imageUpload
+-- @angular-devkit/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]

---

$ ng update rxjs
WARNING: This command may not execute successfully. The package/collection may not support the 'targets' field within 'C:\xampp\htdocs\imageUpload\angular.json'. This can be corrected by renaming the following 'targets' fields to 'architect':
1) Line: 12; Column: 7
2) Line: 104; Column: 7
    Updating package.json with dependency rxjs @ "6.3.2" (was "6.2.2")...
UPDATE package.json (1355 bytes)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 8 packages and updated 1 package in 310.507s