javascript - 如何在不触发错误的情况下控制（异步）JavaScript 加载以下脚本？

Question

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

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

我在准备好加载脚本之前如何异步加载脚本时遇到问题。当浏览器（硬）刷新时，问题就会出现。这是 Chrome 控制台中的错误图像：

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

我搜索了 StackOverflow，发现了一些我认为可能有助于解决我的问题的帖子，例如window.onload事件或.readyState属性的实现；但是，对于我的特定用例，我无法成功获得其中任何一个。

这是一个示例：StackOverflow 帖子

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

标签： javascripthtml