Angularjs using $inject doesn't work - angularjs

Question

I started a huge change in my AngularJs code to improve it. I was looking this reference and found it pretty interesting, so i was changing my code to follow thos guides.
When i got to the rout configuration i couldn't make it work.
If i use a .config like the code below, everything works fine.
angular
.module('agApp')
.config(
['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.when("/", "/First");
$urlRouterProvider.when("", "/First");
$urlRouterProvider.otherwise("/First");
$stateProvider
.state('first', {
url: "/First",
views: {
"main": {
templateUrl: "app/component/first.html",
controller: 'FirstController',
controllerAs: 'vm'
}
}
})
.state('second', {
url: "/Second",
views: {
"main": {
controller: 'SecondController',
controllerAs: 'vm',
templateUrl: "app/component/second.html"
}
}
})
}]);
But when i try to use the code as recomended on the guide, like this:
angular
.module('agApp')
.config('ConfigRouter', ConfigRouter);
/* #ngInject */
function ConfigRouter($locationProvider,$stateProvider,$urlRouterProvider) {
$urlRouterProvider.when("/", "/First");
$urlRouterProvider.when("", "/First");
$urlRouterProvider.otherwise("/First");
$stateProvider
.state('first', {
url: "/First",
views: {
"main": {
templateUrl: "app/component/first.html",
controller: 'FirstController',
controllerAs: 'vm'
}
}
})
.state('second', {
url: "/Second",
views: {
"main": {
controller: 'SecondController',
controllerAs: 'vm',
templateUrl: "app/component/second.html"
}
}
})
}
Then it stops working and i keep getting this error:
Failed to instantiate module agApp due to: Error: [ng:areq]
Argument 'fn' is not a function, got string
I toke care of the proper injection (at least, I think I did) because the output minified code looks like this:
function ConfigRouter(a,b,c){c.when( [.... rest of the code...] ),ConfigRouter.$inject=["$locationProvider","$stateProvider","$urlRouterProvider"],
On the uglify process I'm using ngAnnotate in this order: concat, ngAnnotate and finaly uglify
Am I missing something here? What may be happening to my code?
Do I need any extra file to enable $inject?
I'm trying to structure my AngularJs this way for the first time. By the way, the functionality of the controllers is not affect (also because there is no injection, just a simple function and name definitions), when i can run the app, the rest is working, the problem starts when I try to use the $inject.

Answer 1

The error says it all: you're providing a string as an argument while it should be a function. That's because config blocks don't have names. It has to be
angular
.module('agApp')
.config(ConfigRouter);