5

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.

jstudios
  • 856
  • 1
  • 9
  • 26
  • Have you tried doing a manual initialization of AngularJS by calling the bootstrap function after all the scripts have loaded? [Bootstrap function documentation](https://docs.angularjs.org/guide/bootstrap) – Jacob Petersen Feb 01 '16 at 16:14
  • If you're referring to using `angular.bootstrap` instead of `ng-app="myApp"` then yes, same issue. But I am going to play around with it more. – jstudios Feb 01 '16 at 16:29
  • @PeteTalksWeb Adding `angular.bootstrap` specifically to the end of `active.js` worked instead of using `ng-app="..."` in the HTML, thanks! Add your answer so I may accept it. – jstudios Feb 01 '16 at 16:42
  • Thanks @jstudios ! Glad it worked for you! – Jacob Petersen Feb 01 '16 at 18:22
  • Manual bootstraping indeed works, but not if lazy loadind controllers/providers, which I do a lot.. – Bernardo Dal Corno Dec 02 '17 at 14:04

1 Answers1

6

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.

Jacob Petersen
  • 1,463
  • 1
  • 9
  • 17