Unknown provider: $rootElementProvider when using $injector to get $location service before angular.bootstrap

Question

Hello I am trying to manually bootstrap an angular app, but there is some business that needs to be taken care of first.This article mentions the technique I am interested in.

when I inject this:

 var $injector = angular.injector(["ng"]);
 var $http = $injector.get("$http");

it works fine, but this:

var $injector= angular.injector(["ng", "myApp"]);
var $location = $injector.get("$location");

Throws the following error.

Uncaught Error: [$injector:unpr] Unknown provider: $rootElementProvider <- $rootElement <- $location <- $location

Is it possible to get $location prior to angular.bootstrap?

Thanks a ton!

Answer 1

In order to get the $location before bootstrapping, you would basically need to provide the $rootElement. One way is to mock it: inject ngMock module from angular-mocks to get the injector.

var $injector= angular.injector(['ng','ngMock',"plunker"]);
var $location = $injector.get("$location");

Plunker

Or supply rootElement on your own by creating a mock app and including that while getting the injector.

var mockApp = angular.module('mockApp', []).provider({
  $rootElement:function() {
     this.$get = function() {
       return angular.element('<div ng-app></div>');
    };
  }
});

var $injector= angular.injector(['ng','mockApp',"plunker"]);

var $location = $injector.get("$location");

Plunker

Or other way (based on your feasibility) is to obtain the location from the window using window.location.

Also worthwhile noting this thread on github

Answer 2

root element must be in inserted in document. See http://plnkr.co/edit/OrgStgw4NpjU2LcIFXsB

var rootElement = angular.element(document);

var mockApp = angular.module('mockApp', []).provider({
  $rootElement:function() {
     this.$get = function() {
       return rootElement;
    };
  }
});