Unknown provider: $rootElementProvider <- $rootElement <- $location in angulartics.js - angulartics

Question

I'm using angulartics in my project, but when I add dependency to my module, I get the following error:
Unknown provider: $rootElementProvider <- $rootElement <- $location.
I plugged angulartics.js in html after angular.js
It's generated in the .run:
code of lib here: https://github.com/luisfarzati/angulartics/issues/203
$location is good object, but $rootElementProvider and $rootElement are undefined.
How to solve this problem?

Answer 1

I got this same issue recently, the only reason i know this may happen is when you're creating an angularjs injector manually which depends on a module that injects $location during bootstrap, or when you're trying to get $location yourself through that injector.
This issue is actually not related to the angulartics library itself but rather to angular's own $location service which has a direct dependency over $rootElement, element which is defined during the bootstrap of the app, therefore not existing before the app starts.
There is one easy way to fix this if you're having this issue with angulartics, and that is to remove angulartics as a dependency from your app and add it as a dependency of the resumeBootstrap method, which allows us to add more dependencies on runtime while resuming angular's bootstrapping process.
For example:
angular.module('myApp', [
// array of dependencies without angulartics
]);
var preBootstrapInjector = angular.injector(['ng', 'myApp']);
var $rootScope = preBootstrapInjector.$get('$rootScope');
var myService = preBootstrapInjector.$get('myService');
myService.getDataFromServer()
.then(doSomethingWithThatData)
.then(resumeBootstrap);
function resumeBootstrap(){
// Clean up the custom injector for garbage collection
$rootScope.$destroy();
// Resume Angular's bootstrap process
$(document).ready(function() {
angular.resumeBootstrap([
// dependencies from modules that need $location
'angulartics'
]);
});
}
Cheers!