AngularJS configuration module not being found

Question

I'm fairly new to the AngularJS framework, but basically what I am trying to do is inject a CSRF token into my app, but I want to change the url based on a config. Here is what I have so far:

var VERISION_API = 'v1';
var config_data = {
    'CFG': {
        'EP': 'https://mydomain.com/api/' + VERISION_API + '/web/'
    }
};
var configMod = angular.module("cfg",[]);
angular.forEach(config_data,function(key,value) {
  configMod.constant(value,key);
});

var myApp = angular.module("app", ["cfg", "ngResource", "ngRoute"]);

(function () {
    var $injector = angular.injector(['ng']);
    $injector.invoke(['cfg', '$http', '$rootScope', function (cfg, $http, $rootScope) {
        $rootScope.$apply(function (CFG) {
            $http.get(CFG.EP + "accounts/csrf").then(function (response) {
                myApp.constant("CSRF_TOKEN", response.csrf_token);
                angular.bootstrap(document, ['app']);
            });
        });
    }]);
})();

I keep getting the following error:

Uncaught Error: [$injector:unpr] Unknown provider: cfgProvider <- cfg

I know it has something to do with the way that I am running the $injector.invoke, but I have tried everything. Hopefully someone could help me out and tell me what I am doing wrong?

Might be case sensitive, try 'CFG' as a value to inject into $injector. — Davin Tryon
– Davin Tryon, Commented Jan 6, 2015 at 16:55
@DavinTryon That is not just the issue though... You need the module in the injector as well. — PSL
– PSL, Commented Jan 6, 2015 at 17:08
@PSL ah yeah, missed that. Frankly, I've never seen it done like this. I'd prefer an http interceptor, I think. — Davin Tryon
– Davin Tryon, Commented Jan 6, 2015 at 17:11
@DavinTryon oh yeah that is a good point.. I actually did not even see what is it doing. Plus cfg since it is a part of app's dependency list CFG will just be accessibly in the module app, and the token can just be adden via the interceptor or it can even be added like this. But not sure is that is exactly what OP is doing in the real piece of code. — PSL
– PSL, Commented Jan 6, 2015 at 17:14

PSL · Accepted Answer · 2015-01-06 17:06:26Z

Couple of issues, See inline:-

  var $injector = angular.injector(['ng', 'cfg']); //<-- Add module name here
   /*Injection is case sensitive it mustbe CFG*/
    $injector.invoke(['CFG', '$http', '$rootScope', function (cfg, $http, $rootScope) {
        $rootScope.$apply(function () { //Do not set an argument here
            $http.get(cfg.EP + "accounts/csrf").then(function (response) {
                myApp.constant("CSRF_TOKEN", response.csrf_token);
                angular.bootstrap(document, ['app']);
            });
        });
    }]);

1) You need to get the injector with the module that has the dependency, example:

 var $injector = angular.injector(['ng', 'cfg']);

2) DI service/provider/etc.. names are case sensitive so:

  $injector.invoke(['CFG',...

3) Do not pass an argument in the anonymous function of $rootScope.$apply it will create a local variable within that scope. So just:

  $rootScope.$apply(function () {

injected dependency is available as variable (argument cfg) from the upper scope, so just access it as:

   $http.get(cfg.EP + "accounts/csrf");

Check the network console in the demo:

var configMod = angular.module("cfg", []);
var config_data = {
  'CFG': {
    'EP': 'https://mydomain.com/api//web/'
  }
};
var configMod = angular.module("cfg", []);
angular.forEach(config_data, function(key, value) {
  configMod.constant(value, key);
});
var myApp = angular.module("app", ["cfg", "ngResource", "ngRoute"]);

(function() {
  var $injector = angular.injector(['ng', 'cfg']); //<-- Add module name here
  /*Injection is case sensitive it mustbe CFG*/
  $injector.invoke(['CFG', '$http', '$rootScope',
    function(cfg, $http, $rootScope) {
      $rootScope.$apply(function() { //Do not set an argument here
        $http.get(cfg.EP + "accounts/csrf").then(function(response) {
          myApp.constant("CSRF_TOKEN", response.csrf_token);
          angular.bootstrap(document, ['app']);
        });
      });
    }
  ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

hjl · Accepted Answer · 2015-01-06 16:56:35Z

0

angular gets service from providerCache by exact the string key case sensitive, so CFG should be used

answered Jan 6, 2015 at 16:56

hjl

2,8023 gold badges20 silver badges26 bronze badges

Collectives™ on Stack Overflow

AngularJS configuration module not being found

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related