javascriptangularjsangularjs-injector

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


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!


Solution

  • 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