javascriptangularjslabjs

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

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.

Solution

  • 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.