I am trying to make an api call using the HTTPClient in angular 5. and I am getting the below error:
DOMException: Failed to set the 'responseType' property on 'XMLHttpRequest': The response type cannot be changed for synchronous requests made from a document. at Observable._subscribe (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:229447:34) at Observable._trySubscribe (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:19762:25) at Observable.subscribe (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:19750:93) at Object.subscribeToResult (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:24782:27) at MergeMapSubscriber._innerSub (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:50664:38) at MergeMapSubscriber._tryNext (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:50661:14) at MergeMapSubscriber._next (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:50644:18) at MergeMapSubscriber.Subscriber.next (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:24556:18) at ScalarObservable._subscribe (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:55704:24) at ScalarObservable.Observable._trySubscribe (http://cw.local/assets/js/dist/cw.angular.min.1522911179.js:19762:25)
The code is very basic. However, just to mention this is a Hybrid app which is using NgUpgrade module.
angularjs version 1.5.x angular version 5.1.3
import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
import {MyService} from "./my-service";
@Injectable()
export default class ResultsService {
constructor( private http: HttpClient, private service: MyService) {
}
purchaseByExtractId(extractId, address) {
let payload = {
session_key: key,
admin_district: address
};
return this.http.post(this.service.getUrl(), {postData: payload}).toPromise();
}
purchaseExtractSummary(key) {
return this.http.post(this.service.getUrl(), {postData: {session_key: key}}).toPromise();
}
}
Edit: I have tried removing the toPromise and subscribing also. It still fails with the same error
For everyone else's benefit I'm answering my own question here. The reason was what Onikute has mentioned in one of the comments to original post. I had a tracking library included on the page which was making synchronous calls and was messing up with the angular HTTP requests. Had figured this out a while back but had forgotten to update the answer. Thanks Onikute for reminding.