Intermittent "Wyszukiwanie elementów za pomocą selektorów nie jest obsługiwane przez jqLite!" podczas ładowania AngularJS z RequireJS

Question

Załaduję AngularJS przez RequireJS. Przez większość czasu nie ma problemu ale raz na jakiś czas pojawia się błąd:

Uncaught Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!

wiem, że wszystko jest rzeczywiście ładuje więc problem nie jest z RequireJS nie znalezienie plików.

Oto moja konfiguracja RequireJS:

require.config({ 
baseUrl: 'lib/', 
paths: { 
    jquery: 'external/jquery-2.1.1', 
    angular: 'external/angular', 
}, 
shim: { 
    angular: { 
     exports: "angular" 
    }, 
}, 
}); 

Oto jak załadować RequireJS i kickstart obciążenie:

<script type="text/javascript" src="lib/requirejs/require.js"></script> 
<script type="text/javascript" src="requirejs-config.js"></script> 
<script> 
    require(["start"]); 
</script> 

Używam angularjs 1.3.0 i RequireJS 2.1.15.

Answer 1

Przerywane problemy, takie jak te, są zwykle spowodowane brakiem zależności. W większości przypadków moduły ładują się we właściwej kolejności, ale jest to spowodowane przypadkiem. Raz na jakiś czas szczęście nie jest po twojej stronie i dostajesz niepożądane rezultaty.

Problem polega na tym, że AngularJS używa jQuery tylko opcjonalnie. Jeśli jest obecny, to używa go AngularJS. Jeśli go nie ma, AngularJS użyje biblioteki jqLite, dołączonej do AngularJS, która obsługuje podzbiór tego, co może zrobić jQuery. Jedną ważną różnicą jest to, że oświadczenie takie jak:

angular.element('[ng-controller="something"]') 

będzie działać tylko jeśli jQuery jest dostępny do angularjs i nie będzie działać, jeśli jqLite jest używany zamiast. Jeśli RequireJS ładuje AngularJS przed jQuery, to AngularJS będzie działał bez jQuery i instrukcja zakończy się niepowodzeniem.

To może być stałe zmieniając angularjs podkładkę do:

shim: { 
    angular: { 
     deps: ['jquery'], 
     exports: "angular" 
    }, 
}, 

Answer 2

Jeśli nie chcesz polegać na jQuery wtedy, pod warunkiem, że można wymusić browser version, zamiast

angular.element('.mySelector'); 

użycie

angular.element(document.querySelector('.mySelector')); 

Zobacz here, aby dowiedzieć się, który browsers support document.querySelector.