AngularJS: failed to instantiate module

Question

I'm quite new to AngularJS, I'm struggling with following problem for a while now:

I want to use the resolve functionality of the routeProvider to load some data via a service. But always end up with this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module footballmvc due to: Error: [$injector:modulerr] Failed to instantiate module teams due to: Error: [$injector:unpr] Unknown provider: Teams

This is my code:

index.html

...
<script src="app/app.js"></script>
<script src="app/config.js"></script>
<script src="app/services/divisionService.js"></script>
<script src="app/services/teamService.js"></script>
<script src="app/teams/teamControllers.js"></script>
<script src="app/divisions/divisionControllers.js"></script>
...

...
<body ng-app="footballmvc">
    <div class="container-fluid">
        <div class="row" id="header">
            <h1>{{title}}</h1>
        </div>
        <div class="row">
            <div id="menu" class="col-lg-2">
                <ul class="list-unstyled">
                  <li><a href="#/divisions"><h3>Divisions</h3></a></li>
                  <li><a href="#/teams"><h3>Teams</h3></a></li>
                </ul>
            </div>
            <div id="content" class="col-lg-10" ng-view>
                <!-- Content goes here! -->
            </div>
        </div>
    </div>
</body>
...

app.js

var app = angular.module('footballmvc', ['config','ngRoute','teams','divisions'])
...

teamControllers.js

angular.module('teams', [])
.config(function($routeProvider, Teams, Divisions) {
$routeProvider
.when('/teams', {
  controller:'TeamListCtrl',
  templateUrl:'app/teams/list.tpl.html',
  resolve: { 
      teams : function(Teams) { 
          return Teams.query();       
      }    
  } 
})
...

teamService.js

angular.module('teams', [])

.factory('Teams', function($resource, config){
return $resource(config.MONGO_URL + 'teams/:id', {apiKey: config.MONGO_API_KEY,       id:'@_id.$oid'});
});

***UPDATE: SOLUTION***

Finally found the solution. Clue is to pass the dependency to the service only to the resolve function and not to the config function:

config(function ($routeProvider) {
  $routeProvider
    .when('/teams', {
      controller: 'TeamListCtrl',
      templateUrl: 'app/teams/list.tpl.html',
      resolve: {
          teams: function (Teams) {
              return Teams.query();
          }
      }
    })

In your index.html, do you include all scripts (app.js, teamControllers.js, teamService.js)? — przno
– przno, Commented Apr 19, 2014 at 16:04
Can anyone explain why these parameters should go into a parameter's function instead of config itself? — jlewkovich
– jlewkovich, Commented Sep 24, 2015 at 21:10

Omri Aharon · Accepted Answer · 2014-04-20 19:30:43Z

1

You could try to load the dependent scripts first. Namely, 'config','ngRoute','teams','divisions' before you try to instantiate app module.

Also, you are defining twice the teams module.

angular.module('teams', [])

Should only occur once in your code. When you want to reference that module later on, use

angular.module('teams')
.config(...)

answered Apr 20, 2014 at 19:30

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jordan Papaleo · Accepted Answer · 2014-04-19 16:27:58Z

0

This usually occurs when you have a missing script include on your index.html file or a mis match between you file name and the controller/service/module name. Go back and double check your file names, file paths, and the actual angular names.

answered Apr 19, 2014 at 16:27

Jordan Papaleo

1,51111 silver badges25 bronze badges

Comments

J.Wells · Accepted Answer · 2014-04-19 17:35:43Z

0

That is angular telling you that it can't find the footballmvc module. The script is likely not included on the page, or there is some syntactical error somewhere preventing the module from being loaded/injected. Make sure your script paths are correct and there are no syntax errors before the footballmvc module is instanced in the DOM.

answered Apr 19, 2014 at 17:35

J.Wells

1,75912 silver badges13 bronze badges

Collectives™ on Stack Overflow

AngularJS: failed to instantiate module

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related