As per the angular DOCS If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to AngularJS's built-in subset of jQuery, called "jQuery lite" or jqLite.
I am trying to force angular to use jQuery over JQLite by loading angular after jQuery. However angular.element still is a JQLite reference. Below is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<button onClick="load()">load</button>
<button onClick="check()">check</button>
</body>
<script>
function load() {
var scriptElement = document.createElement("script");
scriptElement.onload = function () {
console.log("Successfully loaded script 2 using (onload).");
};
scriptElement.src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js";
document.head.appendChild(scriptElement);
}
function check() {
console.log(angular.element == jQuery) // false
}
</script>
</html>Also after everything loads if I check angular.element('div') it gives jQlite error,
angular.js:3236 Uncaught Error: [jqLite:nosel] http://errors.angularjs.org/1.6.9/jqLite/nosel
at angular.js:88
at Object.V [as element] (angular.js:3236)
at <anonymous>:1:9
which clearly means angular is pointing to jQlite and not jQuery.
I am doing as per the documentation to point angular to jQuery. Where am I going wrong ?
Simple as using the ngJq on the html element and passing in the window variable for jQuery. This will cause angular to override the use of jQlite