Прерывистый "Поиск элементов с помощью селекторов не поддерживается jqLite!" при загрузке AngularJS с RequireJS

Загружаю AngularJS через RequireJS. В большинстве случаев проблем нет, но время от времени я получаю сообщение об ошибке:

Неподготовленная ошибка: [jqLite: nosel] Поиск элементов с помощью селекторов не поддерживается jqLite!

Я знаю, что все на самом деле загружается, поэтому проблема не в том, что RequireJS не находит файлы.

Вот моя конфигурация RequireJS:

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

Вот как я загружаю RequireJS и запускаю загрузку:

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

Я использую AngularJS 1.3.0 и RequireJS 2.1.15.

Ответы

Ответ 1

Прерывистые проблемы, подобные этому, обычно возникают из-за отсутствующей зависимости где-то.. В большинстве случаев ваши модули загружаются в правильном порядке, но это просто из-за случайности. Время от времени удача не на вашей стороне, и вы получаете нежелательные результаты.

Проблема заключается в том, что AngularJS использует только jQuery. Если он присутствует, то AngularJS использует его. Если он отсутствует, то AngularJS будет использовать библиотеку jqLite, связанную с AngularJS, которая поддерживает подмножество того, что может сделать jQuery. Важным отличием является то, что оператор вроде:

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

будет работать только в том случае, если jQuery доступен для AngularJS и не будет работать, если вместо этого используется jqLite. Если RequireJS загружает AngularJS перед jQuery, то AngularJS будет работать без jQuery, и инструкция не будет выполнена.

Это можно устранить, изменив настройку AngularJS:

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

Ответ 2

Если вы не хотите зависеть от jQuery, тогда при условии, что вы можете обеспечить версию браузера вместо

angular.element('.mySelector');

использование

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

Смотрите здесь, чтобы узнать, какие браузеры поддерживают document.querySelector.