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

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.

Intermittent problems like this are usually due to a missing dependency somewhere. Most of the time your modules load in the correct order but that's just due to chance. Once in a while, luck is not on your side and you get undesirable results.

The issue is that AngularJS uses jQuery only optionally. If it is present, then AngularJS uses it. If it is absent, then AngularJS will use a jqLite library, bundled with AngularJS, that supports a subset of what jQuery can do. One important difference is that a statement like:

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

will work only if jQuery is available to AngularJS, and won't work if jqLite is used instead. If RequireJS loads AngularJS before jQuery, then AngularJS will be working without jQuery and the statement will fail.

This can be fixed by changing your AngularJS shim to:

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

For posterity - this error can also be caused by attempting to compile an empty template string (e.g. one which was dynamically generated):

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