use $http inside custom provider in app config, angular.js

62,771

Solution 1

The bottom line is:

You CANNOT inject a service into the provider configuration section.
You CAN inject a service into the section which initializes the provider's service.

Details:

Angular framework has a 2 phase initialization process:

PHASE 1: Config

During the config phase all of the providers are initialized and all of the config sections are executed. The config sections may contain code which configures the provider objects and therefore they can be injected with provider objects. However, since the providers are the factories for the service objects and at this stage the providers are not fully initialized/configured -> you cannot ask the provider to create a service for you at this stage -> at the configuration stage you cannot use/inject services. When this phase is completed all of the providers are ready (no more provider configuration can be done after the configuration phase is completed).

PHASE 2: Run

During run phase all the run sections are executed. At this stage the providers are ready and can create services -> during run phase you can use/inject services.

Examples:

1. Injecting the `$http` service to the provider initialization function WILL NOT work

//ERRONEOUS
angular.module('myModule').provider('myProvider', function($http) {
    // SECTION 1: code to initialize/configure the PROVIDER goes here (executed during `config` phase)
    ...

    this.$get = function() {
        // code to initialize/configure the SERVICE goes here (executed during `run` stage)

        return myService;
    };
});

Since we are trying to inject the $http service into a function which is executed during the config phase we will get an error:

Uncaught Error: Unknown provider: $http from services

What this error is actually saying is that the $httpProvider which is used to create the $http service is not ready yet (since we are still in the config phase).

2. Injecting the `$http` service to the service initialization function WILL work:

//OK
angular.module('myModule').provider('myProvider', function() {
    // SECTION 1: code to initialize/configure the PROVIDER goes here (executed during `config` phase)
    ...

    this.$get = function($http) {
        // code to initialize/configure the SERVICE goes here (executed during `run` stage)

        return myService;
    };
});

Since we are now injecting the service into the service initialization function, which is executed during run phase this code will work.

Solution 2

This might give you a little leverage:

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

But be careful, the success/error callbacks might keep you in a race-condition between the app start and the server response.

Solution 3

This is an old question, seems we have some chicken egg thing going on if we want to rely on the core capability of the library.

Instead of solving the problem in a fundamental way, what I did is by-pass. Create a directive that wraps the whole body. Ex.

<body ng-app="app">
  <div mc-body>
    Hello World
  </div>
</body>

Now mc-body needs to be initialized before rendering (once), ex.

link: function(scope, element, attrs) {
  Auth.login().then() ...
}

Auth is a service or provider, ex.

.provider('Auth', function() {
  ... keep your auth configurations
  return {
    $get: function($http) {
      return {
        login: function() {
          ... do something about the http
        }
      }
    }
  }
})

Seems to me that I do have control on the order of the bootstrap, it is after the regular bootstrap resolves all provider configuration and then try to initialize mc-body directive.

And this directive seems to me can be ahead of routing, because routing is also injected via a directive ex. <ui-route />. But I can be wrong on this. Needs some more investigation.

62,771

Author by

Kosmetika

#SOreadytohelp

Updated on July 25, 2022

Comments

Kosmetika almost 2 years

The main question - is it possible? I tried with no luck..

main app.js

...
var app = angular.module('myApp', ['services']);
app.config(['customProvider', function (customProvider) {

}]);
...

provider itself

var services = angular.module('services', []);
services.provider('custom', function ($http) {
});

And I've got such error:

Uncaught Error: Unknown provider: $http from services

Any ideas?

Thanks!

Dana Shalev almost 11 years

Can you give an example? (fiddle)
Kosmetika almost 11 years

actually it works but not in the way i would like - my need is to make POST request while configuring angular application and then start to run it. I thought it's possible with providers but it's not :( methods that can use $http or any other service can be executed only in run section unfortunately..
Sean O'Dell over 10 years

Good answer, but while it explains how it's not possible to inject services during configuration, it doesn't explain how to make an HTTP POST/GET during configuration. This is important for applications which are configured using values provided by an API.
Sean Clark Hess over 10 years

That's not possible. I don't think the config phase is asynchronous. You could probably make everything happen during the run phase?
Juho Vepsäläinen almost 10 years

@Sean Maybe in that case it makes sense to use a sync XMLHttpRequest to work around the issue?
Sean Clark Hess almost 10 years

@bebraw & Kosmetika - The only thing I can think you would need to request during the config phase is some kind of settings object. Maybe it contains the API endpoint, user information, the user's locale and language settings, etc. If that's the case, I'd recommend including that information in the javascript source somehow. You can use server-side rendering on index.html to put a few settings in so that they are available before your app initializes. Everything else, I'd try to figure out how to do it post-init
Trevor over 9 years

@Sean: How to make an HTTP POST/GET is a different question than the OP's (Is it possible to use $http inside the configuration phase?), and probably merits a separate post altogether; due to the synchronous nature of Angular's configuration phase, a good way to provide server-side data to your configuration code is to render it as a javascript object in your HTML page during server-side rendering (e.g. <script>var config = <% = mySettings.toJson() %>;</script>). This can be done using a templating engine such as Smarty for PHP, Jinja2 for Python, Nunchucks for NodeJS, etc.
Bernard over 9 years

@threed: Inserting config data directly into the HTML or js on the server works only if your client code comes from the same server. With CORS, it's now possible (and very desirable) to have the client code being served from a different server, and data being served from separate(s) servers. In those cases, we do need to retrieve config data using HTTP.
Dave Alperovich over 9 years

The "accepted answer" failed for my provider... I spent 2 days of frustration trying to make that work with no hope. Your approach worked immediately.
Eric Rini about 9 years

While this is an answer, it is not the answer to the question that was asked.
Eric Rini about 9 years

Can you clarify if the instance created here is the "real" service singleton or just an instance of the service that is discarded when Angular does its real injector magic.
Cody about 9 years

Eric, I cannot confirm that at this time. However, what I usually do (if applicable) is angular.injector(['mymodule']) -- but I'm not sure if you can use this approach for the $http service. I wanna say I have though. Not sure if this helps or not :-/
iamdash about 9 years

This should be the accepted answer. I struggled for a good while trying to get this to work, and this approach solved my problem immediately. I think this may be a very common issue. Thanks @Cody
Dino almost 9 years

I confirm that the accepted solution isn't working for using $http in the provider. But @Cody 's answer does make the trick
Bumbolt over 7 years

I did my services/providers on the same way to have an extra method setApiUrl so i can globaly configure my service url. Does anyone know how to test this? (injecting mocks inside $get)
Jeff Fischer about 7 years

$customProvider in the success callback includes the $ as though it's an internal provider.
Suamere about 7 years

You're right that I had a mix of $ and not-$. I updated it to all be $.
windmaomao over 6 years

I actually implemented something in the past resolving this issue in a non-recommended way. You can create a directive to wrap entire page, and then when you initialize this directive, you can call $http, either directly or from a provider implementation. This is definitely a wrong answer, but it will allow you put anything you want upon initialization, as long as you are not that picky about the order of the bootstrap process.
Mark over 6 years

Can you please elaborate on your solution?