AngularJS TypeError: Cannot read property 'protocol' of undefined

Question

I have changed the $http > URL parameter inside my AngularJS app from

       $http({ method:'POST',
                   url:'http://localhost/api/clients.php'
       }).success(function(data,status,headers,config){
                     deferred.resolve(data);
       }).error(function(data,status,headers,config){ 
                     deferred.reject(status);
       });

to

       $http({ method:'POST',
                   url: ConfigService.Urls.Clients
       }).success(function(data,status,headers,config){
                     deferred.resolve(data);
       }).error(function(data,status,headers,config){ 
                     deferred.reject(status);
       });

where ConfigService is as follows:

Urls: {},
loadUrls: function(){
   Urls.Clients = 'http://localhost/api/clients.php';
}

Of course I call loadUrls before loading controller through .Resolve so I am 100% sure Urls.Clients is not null.

After I did this change I started getting error:

TypeError: Cannot read property 'protocol' of undefined
    at urlIsSameOrigin (http://localhost/myapp/app/lib/angular/angular.js:13710:17)
    at $http (http://localhost/myapp/app/lib/angular/angular.js:7508:23)

What is so confusing is that the application works just fine, except for that error I am getting...can someone please tell me what I am doing wrong here? and why I am getting this error if the application is already working without a problem.

Answer 1

This is clearly an issue with order. The loadUrls isn't getting called until after the $http call is run for the first time. This could be because controllers aren't necessarily loaded in the order you expect - you can't count on the route provider opening and starting up your home controller before it runs other controllers - that is just going to depend on how things are setup. Given the amount of code you have provided here its hard to say what exactly is going wrong as far as order.

That in mind you have a few general options that will fix this:

• Always call loadUrls() before you run a $http request. This isn't elegant but it will fix the issue
• Wrap all of your $http calls and call loadUrls() in that wrapper. This is slightly better than the previous because if you need to change loadUrls() or make sure it is called only once you can implement that logic later.
• You already observed this, but you can change your initialization to be directly in the service rather than in a routine provided by the service. This will fix the issue although it may leave you in a place where you have to update the service every time the url's change.
• Live with the error, knowing that when the controller loads it will instantiate and get the correct data at that point in time. I don't often love solutions like this because it could cause errors later that are hard to trace but if you don't like any of the previous options this could technically be ok.

• Use an app configuration, which is executed when the application loads (note that not all resources are initialized and injection is not allowed). An example from the documentation:

  angular.module('myModule', []).
    config(function(injectables) {
        // provider-injector
        // This is an example of config block.
        // You can have as many of these as you want.
        // You can only inject Providers (not instances)
        // into config blocks.
    }).
  

  You can use this or a run block to initialize what you want

I'm sure there are other options as well depending on how your code is structured but hopefully this at least gets you started. Best of luck!