Menu
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;
});
492
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);
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With