Constant injection error in module config in Angular

Question

Problem is I can't insert constant from one module to another's module config.

myApp.module.js:

'use strict';

angular.module('myApp', [
    'myApp.base',
    'ui.router',
    'ui.bootstrap',
    'myApp.common'
]);

myApp.config.js

'use strict';

angular
    .module('myApp')
    .constant('appConfig', applicationConfiguration())

function applicationConfiguration() {
    var config = {
        debug: true
    };

    switch (window.location.hostname) {
        case 'www.myapp.net':
            config.apiUrl = 'www.myapp.net/';
            config.publicSiteUrl = "www.myapp-public.net";
            break;
        case 'localhost':
            config.apiUrl = 'http://localhost:61057/';
            config.publicSiteUrl = "http://localhost:57563/";
            break;
    }

    return config;
}

This is where I am trying to use it:

'use strict';

angular.module('myApp.base', [
    'myApp'
])
    .config(['$stateProvider','appConfig', function configState($stateProvider, appConfig) {

        $stateProvider
            .state('public', {
                ...
            })
            .state('publicSite', {
                url: appConfig.publicSiteUrl,
                external: true
            });
    }])
    .run(function(){});

When I run the code, I keep on getting following error:

Error: [$injector:modulerr] Failed to instantiate module myApp due to:
[$injector:modulerr] Failed to instantiate module myApp.base due to:
[$injector:unpr] Unknown provider: appConfig

Change .config(['appConfig', function configState($stateProvider, appConfig) { to .config(['$stateProvider', 'appConfig', function configState($stateProvider, appConfig) { — Tushar
– Tushar, Commented Feb 1, 2017 at 6:01
Change .constant('appConfig', applicationConfiguration()) to .constant('appConfig', applicationConfiguration) Removed invocation of function. — Tushar
– Tushar, Commented Feb 1, 2017 at 6:03

MeTe-30 · Accepted Answer · 2017-02-01 06:26:13Z

1

I don't know exactly what are you doing! :| (put constants in App, instead of base, and put routing in base instead of App, or reason of don't putting them together and so much other questions)
But maybe this will solve your problem.

myApp.module.js:

'use strict';

angular.module('myApp', [
    'ui.bootstrap',
    'myApp.common'
]);

myApp.config.js

'use strict';

angular
    .module('myApp')
    .constant('appConfig', applicationConfiguration)

function applicationConfiguration() {
    var config = {
        debug: true
    };

    switch (window.location.hostname) {
        case 'www.myapp.net':
            config.apiUrl = 'www.myapp.net/';
            config.publicSiteUrl = "www.myapp-public.net";
            break;
        case 'localhost':
            config.apiUrl = 'http://localhost:61057/';
            config.publicSiteUrl = "http://localhost:57563/";
            break;
    }

    return config;
}

use it:

'use strict';

angular.module('myApp.base', [
    'myApp',
    'ui.router',
])
    .config(['$stateProvider','appConfig', function configState($stateProvider, appConfig) {

        $stateProvider
            .state('public', {
                ...
            })
            .state('publicSite', {
                url: appConfig.publicSiteUrl,
                external: true
            });
    }])
    .run(function(){});

edited Feb 1, 2017 at 6:26

answered Feb 1, 2017 at 6:16

MeTe-30

2,5422 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user869375 Over a year ago

Myy references and injections were not right. There was a circular reference in code. This was just a simple representation of code. The real code was way more complex, but your sample did help me in revisit my code.

Collectives™ on Stack Overflow

Constant injection error in module config in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related