如何控制（异步）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);
  })

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

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

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

这里是一个示例：StackOverflow Post

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