angularjs - Synchronous XMLHttpRequest on the main thread is deprecated error

Question

For some reason I'm getting the following error in my Angularjs app:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

As I haven't got a clue what's causing it I don't know what code to share? The issue arises when I navigate to a state (ui-router) but there is no controller associated with this state.

Anyone seen this before?

Answer 1

This is caused by trying to do a synchronous AJAX call from the browser.

If the Ajax call is done via jQuery, then it is caused when using:

async: false

as an argument to any of the jQuery ajax calls.

If it's done with native XMLHttpRequest, then it is caused when the third argument to:

xmlhttp.open(...)

is set to false.

---

So, the source of the problem is an ajax call being made from your webpage Javascript. You will have to examine all places that Ajax calls are made and find one that is setting the wrong argument, fix the argument and (probably) rework the response handling to work with an async response.

---

Here's are some articles about one way that synchronous ajax calls are made in Angular so it may give you an idea what to look for:

How to $http Synchronous call with AngularJS

How to create synchronous using $http in angular.js

Since angular only does async by default, it looks like you have to go out of your way to create your own service. To so that, you will be using native XMLHttpRequest objects so you can probably just great the code for XMLHttpRequest and see where that is referenced and then find a .open() call in that neighborhood.