4

I am getting warning in console like below. And this warning coming from zone.js

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

I was using Angular 2 and now I updated to Angular 4. I am also using kendo UI Angular controls. I want to know is this because of angular version update or because of my service implementation. below is service code snippet.

post(url: any, data: any) {


    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    try {

        return this.http.post((new RequestOptions({ headers: headers }))).do(data => {

            if (data != null && data.statusText != "No Content") {
                console.log("Response Data - ", data.json());

            }

        });
    }
    catch (e) {
        console.log(e);
        return null;
    }
}

I know this is caused by trying to do a synchronous AJAX call from the browser. but don't know how to fix it in angular 4.

Karan Patel
  • 2,219
  • 3
  • 19
  • 32
  • 1
    Possible duplicate of [Synchronous XMLHttpRequest on the main thread is deprecated error](https://stackoverflow.com/questions/32726860/synchronous-xmlhttprequest-on-the-main-thread-is-deprecated-error) – Sandman May 23 '17 at 08:07
  • 2
    @Sandman I already checked this question but it's not helpful in angular 4. – Karan Patel May 23 '17 at 08:42
  • Perhaps this issue is caused by a chrome extension, I have a lot of violations in my dev tools console even when I'm doing very simple things and no XHR at all. – realappie May 23 '17 at 08:45
  • Was this solved? I have something similar asked [here](https://stackoverflow.com/questions/48087574/how-to-make-post-calls-in-angular-4-using-observables-and-subscription) – arbghl Jan 05 '18 at 05:07

1 Answers1

0

I got this error (Synchronous XMLHttpRequest on the main thread is deprecated...) on my Angular 5 application due to my stupidity to try and serve the app from the source code folder instead of the dist folder. I make use of koa 2 on nodejs as a web server and my angular app source code is located in a folder called public, so I had (in index.js - the file run by nodejs): 

app.use(serve(__dirname + '/public'));

instead of: 

app.use(serve(__dirname + '/public/dist'));

Before starting the server I run ng build from the /public folder, which builds the Angular app in /public/dist. Point is that the cause of the error and the error message were totally unrelated.

leoncc
  • 233
  • 3
  • 6