Why won't AngularJS work with multiple defer scripts?

Question

I have the following at the bottom of my HTML:

<script defer="defer" src="http://localhost:8080/bower_components/jquery/dist/jquery.min.js"></script>
<script defer="defer" src="http://localhost:8080/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script defer="defer" src="http://localhost:8080/apps/promotion/active.js">
    // "Gulped" angular, ngAnimate, ui.bootstrap, and my angular app; in that order.
</script>
</body>
</html>

At random times, I will get this error when I refresh the page:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=activePromos&p1=Err…20(http%3A%2F%2Flocalhost%3A8080%2Fapps%2Fpromotion%2Factive.js%3A1%3A7124)

Sometimes it will happen for multiple refreshes in a row, and sometimes it will work for multiple refreshes in a row. Nevertheless, there are times when I get the error and it's getting annoying.

What I found out is the following: If I remove the jquery and bootstrap scripts so that I only have the one script (active.js) with the defer attribute, it always work. I am trying to load the scripts after the page is done loading in the specified order.

Should I be doing this a different way (requirejs?)? I assumed using defer and putting the scripts in order would help since I've done it before, but not with AngularJS. I am mainly trying to take advantage of parallel downloads from the browser instead of having one huge JS file, since the page only has 1 image and 2 CSS files.

Answer 1

The angular app will not be able to initialize properly until after all of the required JavaScript files are loaded.

Since you are deferring the load of those files, you will need to wait until all of the files are loaded, and then manually initialize the app using AngularJS's bootstrap function.