AngularJS: injecting providers in .config function

Question

I'm failing to inject a AngularJS Provider, called UserAgent inside a .config function but I'm getting this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: UserAgent

This is my config:

angular
    .module('app')
    .config(Config);

Config.$inject = ['$routeProvider', 'UserAgent'];

function Config($routeProvider, UserAgent) {
    /*** code here ***/

}

And this is my provider:

angular
    .module('app')
    .provider('UserAgent', UserAgent);

    function UserAgent() {
        return {
            $get: function () {
                return {
                    title: "Testing..."
                };
            }
        };
    }

I'm having the same issue. Any solution? – TSmith May 11 '16 at 15:14 — TSmith, May 11 '16 at 15:14

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

Change 'UserAgent' in the following line to 'UserAgentProvider'....

Config.$inject = ['$routeProvider', 'UserAgent'];

Config.$inject = ['$routeProvider', 'UserAgentProvider'];

that's how angular expects providers exposed by apps to be referred as in dependent apps: <ActualProviderName>Provider, the word 'Provider' appended to the actual name of the provider.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 15 '16 at 06:04

pranay kumar

404
3
8

score 2 · Answer 2 · answered May 11 '16 at 15:48

Sorry to necro this question, but I struggled with this same issue and luckily found a solution. I'm no Angular expert so my solution might be done a better way, but hope this helps someone out there.

Looking at AngularJS' documentation for providers , their example states:

myApp.provider('unicornLauncher', function UnicornLauncherProvider() {});

And then they show how to inject that provider into a config function:

myApp.config(["unicornLauncherProvider", function(unicornLauncherProvider) {});

The important thing to note is the naming convention: The provider name doesn't have the word 'Provider' in it at the moment of declaration, yet the config injection does.

Like you, I'm also using a named function for my config. So my config injection declaration looked like:

angular.module('sample').config(['UserAgentProvider', config]);

However, you are doing it slightly different by using the .$inject injector. So your end solution would look like:

angular.module('sample').config(config);
config.$inject = ['UserAgentProvider'];

I too was using the .$inject injector, but switched to the AngularJS documentation style syntax because of this:

Notice that the unicorn provider is injected into the config function. This injection is done by a provider injector which is different from the regular instance injector, in that it instantiates and wires (injects) all provider instances only.

Not sure if the .config(['MyNamedProvider', NamedConfigFunction]) is better vs. NamedConfigFunction.$inject = ['MyNamedProvider'];

But the important point is leaving off the 'Provider' during the declaration of the provider, but adding it back during the injection of said provider

score 0 · Answer 3 · answered Apr 08 '15 at 13:23

0

You may not use services during the configuration phase. The configuration phase is used to configure the providers of services. Once it's done, the providers are called to create the services.

answered Apr 08 '15 at 13:23

JB Nizet

678,734
91
1,224
1,255

So, can I use a provider? – Matheus Lima Apr 08 '15 at 13:24
Yes, you can inject a provider in the config function. But not a service – JB Nizet Apr 08 '15 at 14:49

AngularJS: injecting providers in .config function

3 Answers3