2

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?

tommyd456
  • 10,443
  • 26
  • 89
  • 163
  • Do you have a synchronous AJAX request somewhere? – tymeJV Sep 22 '15 at 21:04
  • If its not alot of code - share all of it ;-) If you're using a SCM (e.g. git) share all of the code which has been changed – Johannes Ferner Sep 22 '15 at 21:05
  • 1
    I think the problem is that you're using a synchronous XMLHttpRequest and synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. – Jan Sep 22 '15 at 21:06
  • I've removed the jQuery tag from the question as this is an Angular app and I haven't written any specific jQuery code. – tommyd456 Sep 22 '15 at 21:07
  • possible duplicate of [jquery has deprecated synchronous XMLHTTPRequest](http://stackoverflow.com/questions/27736186/jquery-has-deprecated-synchronous-xmlhttprequest) – Jan Sep 22 '15 at 21:10
  • Please either delete your question if your issue turned out to be something different or accept the answer that helped you find the problem. Either way, you should indicate to the community that your issue has been resolved. – jfriend00 Sep 27 '15 at 17:40
  • I'm reluctant to do so due to the warning message when deleting questions with answers which is why I voted to close it. – tommyd456 Sep 27 '15 at 18:32

2 Answers2

3

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.

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Added a reference to several articles that discuss how to do synchronous Ajax in AngularJS which should give you an idea what to look for. – jfriend00 Sep 22 '15 at 21:15
  • But I don't see how this error will be triggered by navigating to a state that doesn't even have a controller. – tommyd456 Sep 22 '15 at 21:18
  • @tommyd456 - Not much we can do to help you further without the ability to browser your code - I've explained as much theory as their is - the rest of just detective work in your code. There is obviously a synchronous Ajax call somewhere in your code. One place that some people try to use synchronous Ajax is in `onunload` handlers (because async Ajax does not work there) so that might be one place to look. – jfriend00 Sep 22 '15 at 21:25
  • 1
    I discovered a stupid error. My path to a template was wrong causing this rather misleading error! I've voted to close it – tommyd456 Sep 22 '15 at 21:28
  • My issue was also with the path of the template containing lower case letters instead of upper case. Definitely this error is misleading. – Chandramuralis Dec 15 '16 at 15:14
2

I had the same Synchronous XMLHttpRequest on the main thread is deprecated in my production server while having no such error on my local environment.

In my case this was due to a case mismatch in template name vs js request :

  • AngularJS (a directive in my situation) was requesting lowercase mytemplate.tmpl.html
  • the template file was named with camelCase: myTemplate.tmpl.html

What confused the issue was that the directive / template worked fine on the Mac (due to OSX case-insensitivity) - but failed when pushed to a Linux case-sensitive AWS production server.

Changing the template file name to lowercase fixed the issue.

As mentioned in one of the comments above, the AJAX error is misleading as it implies something wrong with the call itself, rather than simply that the file is "missing".

Community
  • 1
  • 1
goredwards
  • 2,486
  • 2
  • 30
  • 40