Uncaught Error: [$injector:modulerr] Failed to instantiate module with LABJS

Question

I keep getting this error when loading my Angular app. In Chrome a couple refreshes and my app will run but IE and FF is a no go.

The error links me to this error page but I don't really understand what it says.

I am loading my app using LabsJS including the controllers and service.

// spAppLoader.js

$LAB
    .script("../js/app.js").wait()
    .script("../js/controllers/userCtrl.js")
    .script("../js/controllers/groupCtrl.js")
    .script("../js/controllers/siteCtrl.js")
    .script("../js/services/userServices.js")
    .script("../js/services/groupServices.js")
    .script("../js/services/siteServices.js")

Markup:

<div id="mdContainer" ng-app="spApp" ng-cloak>
  ...
</div>
<script type="text/javascript" src="../js/spAppLoader.js"></script>

I wanted to post more code but I don't know where to start and with angular everything is in multiple files. I uploaded it through github.

Answer 1

You should manually bootstrap your app because you use an asynchronous script loader:

$LAB
    .script("../js/app.js").wait()
    .script("../js/controllers/userCtrl.js")
    .script("../js/controllers/groupCtrl.js")
    .script("../js/controllers/siteCtrl.js")
    .script("../js/services/userServices.js")
    .script("../js/services/groupServices.js")
    .script("../js/services/siteServices.js")
    .wait(function(){
      var root = document.getElementById('mdContainer')
      angular.bootstrap(root ,['spApp']);
    })

What is bootstrapping?

angular.bootstrap(root ,['spApp']); is the same as <div id="mdContainer" ng-app="spApp"> only the last one would automatically initialize your app when DOMContentLoaded event occurs.

When using a script loader, DOMContentLoaded event might happen before all scripts are loaded, so you must wait for all your module scripts and then bootstrap your application manually.

In your case, chrome probably cached your scripts so after few refreshes the DOMContentLoaded event happened after all scripts were loaded.

From the docs:

Automatic Initialization

Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to 'complete'. At this point Angular looks for the ng-app directive which designates your application root...

Manual Initialization

If you need to have more control over the initialization process, you can use a manual bootstrapping method instead. Examples of when you'd need to do this include using script loaders or the need to perform an operation before Angular compiles a page.

Answer 2

This error usually means angular can't find an object you are trying to inject into a controller or some other injectable function. After quickly looking through your code, my guess is that there is a problem with the way the files are being loaded, as you are referencing spApp from multiple files.

What I usually do is move separate files into their own modules, and then require other modules as needed. For example, instead of starting the userService like this:

spApp.factory('userService', function(){

put it into its own module

angular.module('spApp.services.user', [])
    .factory('userService', function(){

Then whenever you need to use the userService in another module, add it as a requirement. Eg:

var spApp = angular.module('spApp', ['spApp.services.user']);