CODEWITHSUNDEEP
javascriptangularjsdependency-injection
user869375
user869375

Reputation: 2419

Constant injection error in module config in Angular

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

Upvotes: 0

Views: 320

Answers (1)

MeTe-30
MeTe-30

Reputation: 2542

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(){});

Upvotes: 1

Related Questions