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.

plnkr.co is great for Angular issues – roblarsen Jan 20 '14 at 01:28 — roblarsen, Jan 20 '14 at 01:28

Ilan Frumer · Accepted Answer · 2014-01-20T20:08:58.540

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.

Could you please explain what this does? I'm not familiar with this concept. — Batman, Jan 20 '14 at 03:30
Please read the docs for more information. also see this [tutorial](https://egghead.io/lessons/angularjs-angular-bootstrap-app-init) — Ilan Frumer, Jan 20 '14 at 09:43
Hi Ilan, I haven't had the chance to work on the application yet. I'll give it a shot after work and report back. — Batman, Jan 20 '14 at 15:23
It's loading without issue in Chrome and Firefox now. IE is still giving me an error but it's not related to this I don't think. Something about unexpected identifier in my user service that chrome and firefox aren't completely about. But that's a different question I think. Thanks a lot for your help. — Batman, Jan 20 '14 at 18:30

score 0 · Answer 2 · answered Jan 20 '14 at 01:20

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']);

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

2 Answers2

What is bootstrapping?

Automatic Initialization

Manual Initialization