1

I have an Angular directive element nested inside a controller, and I get this message

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/. WARNING: Tried to load angular more than once.

I kinda understand what it means, but I don't know what is causing this issue. Here's what I have:

audio.html

<div class="audio-top-bar" ng-controller="AudioController">
    <div class="audio-tuner-button" ng-click="displayTunerModal()">
          <button class="btn">
              <p class="audio-tuner-type">{{tunerButton}}</p>
          </button>
    </div>
    <display-tuner-modal ng-show="visibility"></display-tuner-modal>
</div>

AudioController.js

angular.module('app').controller('AudioController', ['$scope', 'TunerService', function($scope, TunerService){
    $scope.visibility = false;

    if ($scope.tunerButton == (null || undefined))
        $scope.tunerButton = 'FM';
    $scope.displayTunerModal = function(){
        $scope.visibility = true;
    };
}]);

displayTunerModal.js

angular.module('app').directive('displayTunerModal', ['TunerService' , function (TunerService){

    return {
        restrict: 'E',
        link: function(scope, elem, attrs){
            scope.displayTunerModal = function(){
                console.log("CLICKED");
            };
        },   
        templateUrl: 'public/templates/displayScreenModal.html'
    };  
}]);
Les Paul
  • 1,260
  • 5
  • 22
  • 46
  • 1
    Nothing in code shown has anything to do with ajax which is what XMLHttpRequest is known as. – charlietfl Jun 09 '16 at 23:29
  • My apologies the problem was as simple as having an incorrect name for the link. I should have had "displayTunerModal.html". – Les Paul Jun 09 '16 at 23:32

2 Answers2

0

My apologies the problem was as simple as having an incorrect name for the link within the directive. I should have had "displayTunerModal.html".

Moral of the story: check your links.

Les Paul
  • 1,260
  • 5
  • 22
  • 46
0

As per this question I had the same Synchronous XMLHttpRequest on the main thread is deprecated in an AngularJS directive on 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 a specific call, rather than simply that a file is "missing".

Community
  • 1
  • 1
goredwards
  • 2,486
  • 2
  • 30
  • 40
  • 1
    Please don't add the [same answer](http://stackoverflow.com/a/42128191/5292302) to multiple questions. Answer the best one and flag the rest as duplicates. See [Is it acceptable to add a duplicate answer to several questions?](http://meta.stackexchange.com/questions/104227/is-it-acceptable-to-add-a-duplica‌​te-answer-to-several-questions) – Petter Friberg Feb 09 '17 at 08:34
  • @PetterFriberg please read (and understand) both questions before making that call. They're not duplicate questions so can't be marked as such. It's a confusing coding bug (with a poorly worded / misleading error message) that wasted a bunch of my time so I put the solution in both questions - since this answer is a specific solution to both (slightly different) situations. In addition I linked my original answer's question in this answer (for transparency and usefulness). – goredwards Feb 09 '17 at 09:34