尝试动态加载我的Angular脚本会产生一个“;未找到角度”;错误

Trying to load my Angular scripts dynamically yields an "angular not found" error

本文关键字：一个 错误 我的 加载 动态 Angular 脚本      更新时间：2023-09-26

我的Angular应用程序运行良好。然而，我厌倦了在HTML中有这么多script标签，所以我写了一个小脚本来——我想——为我生成所有标签：

var scriptURLs = [
  "js/angular.min.js",
  "js/firebase.min.js",
  "js/angularfire.min.js",
  "js/myapp.js",
  "js/mycontroller.js"
  // ...and so on
]
window.onload = function loadScripts(){
  scriptURLs.forEach(function(url){
    var el = document.createElement("SCRIPT");
    el.src = url;
    document.head.appendChild(el);
  });
}

这确实生成了所有的script标记，并且URL都是正确的：没有抛出404。然而，这会产生一系列angular is not defined错误。我在没有window.onload的情况下也试过，结果也是一样的。

再次对HTML中的所有script标记进行硬编码是没有问题的，或者我可以使用Grunt或其他依赖管理器，但我仍然想知道为什么会发生这种情况。

每次重新加载页面时，引发错误的文件的顺序略有不同，因此看起来文件是异步加载的，因此执行顺序错误。但我对script标记的理解是，它们是同步阻塞、加载和执行的（除非您使用async属性，而我不是）。所以我有点困惑！

有没有想过为什么会发生这种事？非常感谢。

删除ng-app指令、删除window.onload并手动引导我的应用程序修复了它：

HTML:

<head>
  <title>MyApp</title>
  <link rel="stylesheet" href="css/style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
  <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/1.1.3/angularfire.min.js"></script>
  <script src="js/script.js"></script>
</head>

JS:

loadScripts();
angular.element(document.head).ready(function(){
  angular.bootstrap(document, ["messageBoard"]);
});
相关文章：