Angular 1.3.10 Uncaught Error: [$injector:modulerr] - angularjs

Question

The app contains very little at the moment, so this is a basic error. I'm using ui-router. This is what I've got in the various files:
app.module.js:
'use strict';
angular
.module('app', app);
app.$inject = [
'ui.router',
'ngCookies',
'ngSanitize',
];
function app(){}
app.routes.js:
'use strict';
angular
.module('app')
.config(routes);
routes.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
function routes($stateProvider, $urlRouterProvider, $locationProvider) {
// Remove # from url
$locationProvider.html5Mode(true);
// Set 404
$urlRouterProvider.otherwise('/404');
// Configure app states
$stateProvider
.state('app', {
abstract: true,
url: '',
templateUrl: 'modules/app/app.html',
controller: 'AppController'
})
}
app.controller.js:
'use strict';
angular
.module('app')
.controller('AppController', AppController);
AppController.$inject = ['$rootScope', '$scope'];
function AppController($rootScope, $scope) {
}
I'm getting the above error in the console on page load - what am I missing?

Answer 1

You are calling $inject on a variable called app, which does not exist in global scope:
angular.module('app', app);
app.$inject = [
'ui.router',
'ngCookies',
'ngSanitize',
];
Now if you would assign your module definition to a variable called app it works:
var app = angular.module('app', app);
app.$inject = [
'ui.router',
'ngCookies',
'ngSanitize',
];
Next the signature for module definition:
angular.module(name, [requires], [configFn]);
Your again using a variable called app (which doesn't exist) where your requires/injectables array should be. So you could do this:
var injections = [
'ui.router',
'ngCookies',
'ngSanitize',
];
var app = angular.module('app', injections);
Or even better: (keeps the global scope clear)
var app = angular.module('app', [
'ui.router',
'ngCookies',
'ngSanitize',
]);
Now you can strip out:
app.$inject = [
'ui.router',
'ngCookies',
'ngSanitize',
];
But it's best practice to keep your entire global scope as clean as possible. So you don't assign your module to variable:
angular.module('app', []);
And when you need it for configuration or attaching controllers or directives, etc, you call:
angular.module('app').config();
angular.module('app').controller();
angular.module('app').directive();
Or you can chain them together:
angular.module('app')
.config()
.controller()
.directive();
Another tip, when doing your configuration or creating a controller, you don't have to do seperate injection, you can simply do:
angular.module('app').config([
'$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
.....
}
]);
The bracket notation is needed so when you minify your scripts, it will not screw up your injections, if you don't minify you can do without:
angular.module('app').config(
function ($stateProvider, $urlRouterProvider, $locationProvider) {
.....
}
);
I know your problem is solved already, just thought i should clear things up a little. Good luck!

Answer 2

first remove the comma after 'ngSanitize' in app.module.js:
angular
.module('app', [
'ui.router',
'ngCookies',
'ngSanitize'
];

Answer 3

The module didn't like being instantiated like that, so I changed it to this and it works fine:
'use strict';
angular
.module('app', [
'ui.router',
'ngCookies',
'ngSanitize'
];