web-dev-qa-db-fra.com

Intermittent "jqLite ne prend pas en charge la recherche d'éléments via les sélecteurs!" lors du chargement de AngularJS avec RequireJS

Je charge AngularJS via RequireJS. La plupart du temps, il n'y a pas de problème mais je reçois parfois l'erreur:

Erreur non capturée: [jqLite: nosel] La recherche d'éléments via les sélecteurs n'est pas prise en charge par jqLite!

Je sais que tout est en cours de chargement, le problème n’est donc pas lié au fait que RequireJS ne trouve pas les fichiers. 

Voici ma configuration RequireJS:

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

Voici comment je charge RequireJS et lance le chargement:

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

J'utilise AngularJS 1.3.0 et RequireJS 2.1.15.

javascriptangularjsrequirejs
27
Louis

Les problèmes intermittents comme celui-ci sont généralement dus à une dépendance manquante quelque part. La plupart du temps, vos modules se chargent dans le bon ordre, mais cela est dû au hasard. De temps en temps, la chance n'est pas de votre côté et vous obtenez des résultats indésirables.

Le problème est que AngularJS utilise jQuery uniquement en option. Si tel est le cas, AngularJS l'utilise. S'il est absent, AngularJS utilisera une bibliothèque jqLite, fournie avec AngularJS, qui prend en charge un sous-ensemble de ce que jQuery peut faire. Une différence importante est qu’une déclaration comme:

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

ne fonctionnera que si jQuery est disponible pour AngularJS et ne fonctionnera pas si jqLite est utilisé à la place. Si RequireJS charge AngularJS avant jQuery, alors AngularJS fonctionnera sans jQuery et l'instruction échouera.

Ceci peut être corrigé en changeant votre cale AngularJS en: 

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

Si vous ne voulez pas dépendre de jQuery, alors à condition que vous puissiez appliquer la version du navigateur , au lieu de

angular.element('.mySelector');

utilisation

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

Voir ici pour savoir quels navigateurs prennent en charge document.querySelector .

28
ccpizza

Pour la postérité - cette erreur peut également être provoquée en essayant de compiler une chaîne de modèle vide (par exemple, une chaîne générée dynamiquement):

var someTemplate = "";
$compile(someTemplate); // throws (with jQuery lite at least)
0
eddiewould