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.