How to solve dependency issues with built AngularJS app?

Question

I'm new to AngularJS and am creating an app which will be built using Grunt.

When I build and run my app, I'm noticing some issues related to dependency load order:

Uncaught Error: [$injector:nomod] Module 'mycompany.admin.forms' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.13/$injector/nomod?p0=mycompany.admin.forms 

In the built app file, the module is being used before it is declared:

angular.module('mycompany.admin.forms').controller('editController', ['$scope', function($scope) {
    // ...
}]);

angular.module('mycompany.admin.forms', [])

  .config(['$routeProvider', function($routeProvider) {
    // ...
  }]);

Here are pertinent snippets from my project's gruntfile.js:

grunt.initConfig({
    distdir: 'build',
    pkg: grunt.file.readJSON('package.json'),
    src: {
        js: ['src/**/*.js'],
    },
    concat: {
        dist: {
            src: ['<%= src.js %>', '<%= src.jsTpl %>'],
            dest: '<%= distdir %>/admin/app.js'
        }
    }
    ...
});

I know I can solve this by putting all source for a given module into one file; however, I'd like to try and keep each thing (each controller, each service, etc.) in its own file.

How can I solve this dependency load order issue?

Answer 1

What order is grunt concatenating your files in? It looks like you're just reading a directory, and if the javascript file that module declaration is in is after the file that the controller is in then the concatenated file will be built in the wrong order.

Probably the simplest solution is to explicitly list the file that contains your module declaration (with []) as the first file in your source array.

Answer 2

For solving dependency load issues I recommend you using Require.js

It works very well with Angular and also you have a grunt plugin for making the build.