Intermittent "Looking up elements via selectors is not supported by jqLite!" when loading AngularJS with RequireJS

Question

I load AngularJS through RequireJS. Most of the time there is no problem but once in a while I get the error:

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

I know that everything is actually loading so the issue is not with RequireJS not finding the files.

Here is my RequireJS configuration:

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

Here is how I load RequireJS and kickstart the load:

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

I'm using AngularJS 1.3.0 and RequireJS 2.1.15.

Answer 1

If you do not want to depend on jQuery then, provided that you can enforce the browser version, instead of

angular.element('.mySelector'); 

use

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

See here to find out which browsers support document.querySelector.