I've used annotations everywhere (in controllers, services,...) except for a few files. As I'm getting problems with minification, I'm rewriting these last few files.

This is my current config:

(function () {

    angular.module('app')
        .config(function ($stateProvider, $urlRouterProvider, $provide, $httpProvider, showErrorsConfigProvider, LightboxProvider) {
            $httpProvider.interceptors.push('requestsErrorHandler');
            $urlRouterProvider.otherwise('/');
            showErrorsConfigProvider.showSuccess(true);

            // more code
            // routing and stuff...


        });

}());

This works fine. I'm now trying to rewrite this with annotations:

(function () {

    angular.module('app')
        .config('configurationapp', configurationapp);

    configurationapp.$inject = ['$stateProvider', '$urlRouterProvider', '$provide', '$httpProvider', 'showErrorsConfigProvider', 'LightboxProvider'];

    function configurationapp($stateProvider, $urlRouterProvider, $provide, $httpProvider, showErrorsConfigProvider, LightboxProvider) {
            $httpProvider.interceptors.push('requestsErrorHandler');
            $urlRouterProvider.otherwise('/');
            showErrorsConfigProvider.showSuccess(true);


            // more code
            // routing and stuff


        }
}());

However, I'm getting this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [ng:areq] Argument 'fn' is not a function, got string

I don't understand why I'm getting this error. I've done exactly the same as with all other files, still this doesn't work.

What am I doing wrong?

I've used annotations everywhere (in controllers, services,...) except for a few files. As I'm getting problems with minification, I'm rewriting these last few files.

This is my current config:

(function () {

    angular.module('app')
        .config(function ($stateProvider, $urlRouterProvider, $provide, $httpProvider, showErrorsConfigProvider, LightboxProvider) {
            $httpProvider.interceptors.push('requestsErrorHandler');
            $urlRouterProvider.otherwise('/');
            showErrorsConfigProvider.showSuccess(true);

            // more code
            // routing and stuff...


        });

}());

This works fine. I'm now trying to rewrite this with annotations:

(function () {

    angular.module('app')
        .config('configurationapp', configurationapp);

    configurationapp.$inject = ['$stateProvider', '$urlRouterProvider', '$provide', '$httpProvider', 'showErrorsConfigProvider', 'LightboxProvider'];

    function configurationapp($stateProvider, $urlRouterProvider, $provide, $httpProvider, showErrorsConfigProvider, LightboxProvider) {
            $httpProvider.interceptors.push('requestsErrorHandler');
            $urlRouterProvider.otherwise('/');
            showErrorsConfigProvider.showSuccess(true);


            // more code
            // routing and stuff


        }
}());

However, I'm getting this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [ng:areq] Argument 'fn' is not a function, got string

I don't understand why I'm getting this error. I've done exactly the same as with all other files, still this doesn't work.

What am I doing wrong?

• javascript
• angularjs
• dependency-injection

• May be some module is failing to load. Please have a look at your browser's console to see if any files are not being downloaded/loaded correctly. – Khalid Hussain Commented Oct 27, 2015 at 9:02
• Nope, everything seems to be fine. I'm sure the problem is related to this code, as when I revert the changes, everything works again. – Bv202 Commented Oct 27, 2015 at 9:05

2 Answers 2

A string was provided to config:

angular.module('app')
    .config('configurationapp', configurationapp);

It expects a single argument, function or array. configurationapp isn't Angular service and shouldn't be named:

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

Try this syntax. I find the inline annotation easier than the explicitly inject dependencies:

  (function () {

    angular.module('app')
        .config(['$stateProvider', '$urlRouterProvider', '$provide', '$httpProvider', 'showErrorsConfigProvider', 'LightboxProvider',
        function ($stateProvider, $urlRouterProvider, $provide, $httpProvider, showErrorsConfigProvider, LightboxProvider) {
            $httpProvider.interceptors.push('requestsErrorHandler');
            $urlRouterProvider.otherwise('/');
            showErrorsConfigProvider.showSuccess(true);

            // more code
            // routing and stuff...


        }]);

}());