如何在加载以下脚本时控制（异步）JavaScript而不触发错误？

在我的单页应用程序（SPA）的index.html页面上，我尝试运行以下脚本：

我在javascript如何在脚本准备加载之前异步加载脚本方面遇到了问题。如果浏览器（硬）刷新，则问题会在浏览器刷新时显示。以下是Chrome控制台中错误的图像：

当然，错误消息具有误导性，并且在故障排除时可能会造成兔子洞。这个问题与角度无关，而是在加载页面之前没有完全加载依赖项。我可以确认这一点，因为类似的代码涉及一个更小的文件数组，在执行时会成功加载（数组的内容不同，这取决于应用程序是在本地主机5000上执行，还是在服务器[Heroku]上使用我们的DNS执行，使用

document.location.hostname

解析）

我搜索了StackOverflow，找到了一些我认为可能有助于解决问题的帖子，比如实现

窗口.onload

事件或

.readyState

属性；然而，对于我的特定用例，我还没有能够成功地获得它们中的任何一个

以下是一个例子：

---

非常感谢StackOverflow社区提供的任何帮助和/或指导。

您是否考虑过减少脚本列表，将每一个脚本添加到下一个脚本之后，或者只是将它们全部提取并按顺序加载？当你从js中添加脚本时，我不会依赖于脚本的加载方式。不要重新发明轮子，使用webpack或类似工具，甚至手动将其放入head中。。。或者简单地将其转换为字符串并附加到header中，这些脚本是否相互依赖？以您显示的方式添加的脚本没有保证的执行顺序：。您需要考虑使用WebPACK、BurSeriType或要求。js@DoMiNeLa10假设您指的是使用标记分别调用每个对象，那么是的。。。它以前就是这样建立的。当前的用例要求根据

document.location.hostname

加载不同的脚本，因为当通过DNS/服务器访问应用程序时，我们使用的是一个精简版本的脚本，这些脚本都组合到一个文件中。简单地说，这是编写应用程序的最易于维护的方法。这也是我们拥有ES6模块的原因。现在，您有一个需要依赖关系图的应用程序，但依赖关系的解决取决于运气。browserify、webpack和require.js等工具有助于定义和实施依赖关系图。

  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);
  })