javascript - How to solve dependency issues with built AngularJS app? - Stack Overflow

admin管理员组

文章数量:1386673

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 'mypany.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.
.2.13/$injector/nomod?p0=mypany.admin.forms 

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

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

angular.module('mypany.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?

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 'mypany.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/1.2.13/$injector/nomod?p0=mypany.admin.forms 

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

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

angular.module('mypany.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?

• javascript
• angularjs
• build
• gruntjs
• dependency-management

Share Improve this question Follow asked Feb 20, 2014 at 17:58 Chad JohnsonChad Johnson 21.9k3636 gold badges116116 silver badges218218 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

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

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

本文标签： javascriptHow to solve dependency issues with built AngularJS appStack Overflow