AngularJS Configuration Structure

Question

I want to summarize all module configurations within a block and it doesn't work and I don't get any error message.

The following works:

angular.module('myApp', [
    'ngRoute',
    'oc.lazyLoad',
    'myApp.login',
]).
config(
    [
        '$routeProvider', function($routeProvider) {
            $routeProvider
                .otherwise({redirectTo: '/login'});
        }
    ]
);


angular.module('myApp').config(
    function($ocLazyLoadProvider) {
        $ocLazyLoadProvider.config(
            {
                modules: [{
                    name: 'icons_and_fonts',
                    files: [
                        'components/font-awesome/css/font-awesome.min.css',
                        'components/weather-icons/css/weather-icons.min.css'
                    ]
                }],
                debug: true,
                events: true
            });
    }
);

But if I want to integrate $ocLazyProvider into the configuration block above, it doesn't work, the following code does not work:

config(
    [
        '$routeProvider', function($routeProvider) {
            $routeProvider.otherwise({redirectTo: '/login'});
        }
    ],
    [
        '$ocLazyLoadProvider', function($ocLazyLoadProvider) {
        $ocLazyLoadProvider.config(
                {
                    modules: [{
                        name: 'icons_and_fonts',
                        files: [
                            'components/font-awesome/css/font-awesome.min.css',
                            'components/weather-icons/css/weather-icons.min.css'
                        ]
                    }],
                    debug: true,
                    events: true
                }
            )
        }
    ]
);

What could be the problem?

Answer 1

You should pass a single array/function into the config block, instead of multiple. you can perform both configurations in a single function, that would look something like:

config(['$routeProvider','$ocLazyLoadProvider',function($routeProvider,$ocLazyLoadProvider) {
        $routeProvider.otherwise({redirectTo: '/login'});
        $ocLazyLoadProvider.config(
                {
                    modules: [{
                        name: 'icons_and_fonts',
                        files: [
                            'components/font-awesome/css/font-awesome.min.css',
                            'components/weather-icons/css/weather-icons.min.css'
                        ]
                    }],
                    debug: true,
                    events: true
                }
            )
        }
    ]
);