Search code examples
angularjsrequirejsdomreadyangular-bootstrap

Uncaught object at AngularJS + RequireJS + domReady

I had a working AngularJS application and started using RequireJS for module dependencies. Following this guide - http://www.startersquad.com/blog/angularjs-requirejs/ - with domReady plugin for manually bootstrapping angular app.

Tested in Chrome and got Uncaught object in Console. No usual details that angular usually provides, only unhelpful call stack.

Here's a very simplified version of my app:

<html ng-app="myApp">
<body>
    <script data-main="/scripts/config.js" src="scripts/require.js"></script>
</body>
</html>

config.js:

requirejs.config({
    shim: { 'angular': { exports: 'angular' } },
    deps: ['starting']
});
define(['require', 'angular', 'app'], function (require, angular) {
    require(['domReady!'], function (document) {
        angular.bootstrap(document, ['myApp']);
    });
});

app.js:

define(['angular'], function (angular) {
    var app = angular.module("myApp", []);
    return app;
});
Solution

  • Actually, in simplified version, the error is much easier to spot. The problem lies in double usage of module. First time at HTML (leftover from the time before RequireJS):

    <html ng-app="myApp">

    And the second time at manual bootstrap after RequireJS finished loading the document:

    angular.bootstrap(document, ['myApp']);

    So this is the correct version of HTML:

    <html> <!-- Notice: removed ng-app -->
<body>
    <script data-main="/scripts/config.js" src="scripts/require.js"></script>
</body>
</html>

    Also, to see real AngularJS errors instead of Uncaught object (which is printed by RequireJS that has special treatment for exceptions), you may catch and show them as following:

    require(['domReady!'], function (document) {
    try {
        // Wrap this call to try/catch
        angular.bootstrap(document, ['materialApp']);
    }
    catch (e) {
        console.error(e.stack || e.message || e);
    }
});