0

On the index.html page of my single-page-application (SPA), I am trying to run the following script:

  var js_files = [
    "/js/libraries/angular.min.js",
    "/js/libraries/angular-ui-router.min.js",
    "/js/libraries/headroom.js",
    "/js/libraries/angular-material.min.js",
    "/js/libraries/angular-headroom.js",
    "/js/main.js",
    "/js/config.js",
    "/js/directives.js",
    "/js/controllers.js",
    "/js/controllers/site.js",
    "/js/controllers/application.js",
    "/js/controllers/auth.js",
    "/js/controllers/user.js",
    "/js/controllers/console.js",
    "/js/controllers/deal.js",
    "/js/controllers/matching.js",
    "/js/controllers/helpers.js"
  ]
  js_files.forEach(function(file) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = file;
    script.async = false;
    document.body.appendChild(script);
  })

I'm having trouble with how javascript asynchronously loads the script before it is ready to be loaded. The issue manifests when the browser if (hard) refreshed. Here is an image of the error in Chrome Console:

Illustration of Error in Google Chrome Console

Of course, the error message is misleading and has the potential of creating a rabbit's hole when troubleshooting. The issue has nothing to do with Angular, but rather the dependencies not fully loading before the page is loaded. I can confirm this because similar code involving a much smaller array for files loads successfully when executed (content of the array is different depending on whether the application is executed locally on LOCALHOST:5000 or on the server [Heroku] using our DNS which is parsed using document.location.hostname).

I searched around StackOverflow and found a few posts that I thought might be helpful in solving my problem, such as the implementation of a window.onload event or .readyState property; however, I have not been able to successfully get any of them for my specific use case.

Here is one example: StackOverflow Post

Any help and/or direction from the StackOverflow community would be much much appreciated.

tabish89
  • 371
  • 3
  • 10
  • Have you considered reducing your list of scripts where each one is added after the next one, or just fetching them all and loading them in order? I wouldn't rely on how scripts are loaded when you're adding them from js. –  Jul 23 '18 at 17:22
  • 1
    Don't reinvent the wheel, use webpack or similar, or even put it into head manually... or simply make it into string and append into head – Akxe Jul 23 '18 at 17:22
  • Do those scripts have inter-dependencies on one another? Scripts added the way that you are showing have no guaranteed execution order: [load and execute order of scripts](https://stackoverflow.com/a/8996894/691711). You need to consider using either webpack, browserify, or require.js – zero298 Jul 23 '18 at 17:25
  • @DoMiNeLa10 Assuming you're referring to calling each one individually using the – tabish89 Jul 23 '18 at 17:27
  • @zero298 Some likely have interdependencies, especially on `angular.min.js`. You've hit the nail on the head, because in about 1 out of 7 times the application will load properly. I'm not familiar on how to leverage any webpacks etc. to solve this issue. Is that the only way? – tabish89 Jul 23 '18 at 17:39
  • 2
    To be plain, it is the most maintainable way of writing your application moving forward. It's also the reason we have ES6 modules. Right now, you have an application that needs a dependency graph but you are leaving dependency resolution up to chance. Tools like browserify, webpack, and require.js help to define and enforce the dependency graph. – zero298 Jul 23 '18 at 17:43
  • @zero298. Thanks! Will investigate further. Very thankful for being pointed in the right direction. – tabish89 Jul 23 '18 at 19:02

0 Answers0