AngularJS 无法加载模块答案

【问题标题】：AngularJS fail to load moduleAngularJS 无法加载模块
【发布时间】：2012-10-10 21:49:48
【问题描述】：

编辑：这只发生在 IE 上（在 IE10 上测试）

我有一个应用程序，最初可以正常加载，但是，刷新时会出现以下错误：

SCRIPT5022：没有模块：myAppModule

myAppModule 是在 app.js 中定义的一个 angular 模块，在加载 angular.js 后加载

angular.module('myAppModule', []);

并通过以下方式自动引导：

<html ng-app="myAppModule">

脚本加载如下（无 AMD 加载器）：

<script>window.jQuery ||
    document.write('<script src="js/vendor/jquery-1.8.0.min.js"></script>')</script>
<script>window.angular ||
    document.write('<script src="js/vendor/angular-1.0.2.min.js"></script>')</script>

<script src="js/app.js"></script>
<script src="js/controller.js"></script>

我认为 angularjs 会先加载并自动引导应用程序，但 app.js 尚未加载

【问题讨论】：

嗯，这很奇怪，AngularJS 通常会在完全加载后开始 boostraping 模块。您能否分享更多信息：使用的浏览器、加载脚本的方法（简单的脚本标签或 AMD）链接到应用程序、更多代码等。一个 plunk 将是理想的。
已编辑。我相信 AngularJS 在 app.js 有机会加载之前就已经完全加载了吗？这可能吗？
出于好奇：您可以尝试使用常规
是的，我尝试在本地加载它们而不是通过 CDN，但仍然相同
只有当我部署到远程网络服务器时才会发生这种情况......在本地运行似乎很好，除了偶尔会发生......我再次估计它在加载 AngularJS 和 app.js 之间的滞后

标签： javascript html angularjs

【解决方案1】：

好吧，我不知道为什么自动引导会失败，但如果我手动引导应用程序，它就可以正常工作。

例如

<html>

...

<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script>angular.bootstrap(document, ['myAppModule']);</script>

【讨论】：

所以这是使用ng-app的替代方法？
YES ... var myAppModule = angular.module("myAppModule",[]); myAppModule.controller ("purchaseController", function ($scope){ .... }) angular.bootstrap(document, ['myAppModule']);

【解决方案2】：

我遇到了同样的问题，只是在 IE9 中。较低版本的 IE 实际上运行良好，较新的浏览器也是如此。

手动引导解决了这个问题，但是对于属于我的模块的过滤器抛出了一个错误“Unknown Provider”。请注意，过滤器似乎仍按预期运行。

最后，解决我的问题并完全停止抛出错误的解决方案是简单地将模块文件重命名为与模块相同。

所以如果我的模块名称是myAppModule，那么文件名应该是myAppModule.js 而不是my_app_module.js。

【讨论】：

【解决方案3】：

当我发现自己做错了什么时，我觉得自己像个白痴，但如果你像我一样，那么首先要检查其他一些事情：

确保首先加载子模块。就我而言，我必须确保子模块在物理上位于我的父模块之前。您可以通过在每个模块初始化行上放置一个断点来确认这一点。
即使有正确的物理订单，执行订单仍然关闭。我的一个模块被包裹在一个自动执行的函数中，而另一个没有。呵呵。
子函数中存在错误，实际上导致此错误在控制台中显示两次。这是因为我使用这样的语法：
```
var mod = angular.module("blah", []);
mod.filter("filterName", function(){ ... }); 
```
有一次我在启动模块时忘记了空括号，所以该行看起来像这样并抛出了这个错误：
```
var mod = angular.module("blah");  // <-- wrong
```

回顾一下，确保子模块首先执行并且没有错误。

【讨论】：

【解决方案4】：

顺便说一句，使用 Angular 1.0.6，在 Angular（硬编码脚本标签）之前加载 jQuery 会导致 IE10 抛出“no Module”错误。

我能找到纠正它的唯一选择是手动引导并确保在所有其他子模块引用（如提到的 Barnabas）之后加载定义模块的 app.js。

【讨论】：

【解决方案5】：

我们只在 IE 中遇到了同样的问题。这是由一个错字引起的（一定是有猫踩到了键盘）：

<script type=" text/javascript" src="assets/js/app.js"></script>

类型属性值中的前导空格导致了问题。删除后，该应用程序再次正常运行。

【讨论】：

【解决方案6】：

app.config(['$stateProvider', ($stateProvider) => {
  $stateProvider.state('login', {
    url: '/login',
    templateUrl: 'partials/login.html'
  }).state('dashboard', {
    url: '/dashboard',
    templateUrl: 'partials/dashboard.html'
  })
}])

就我而言，Internet Explorer 不喜欢箭头功能。将这些更改为 function(){} 表示法解决了这个问题：

app.config(['$stateProvider', function ($stateProvider) {
  $stateProvider.state('login', {
    url: '/login',
    templateUrl: 'partials/login.html'
  }).state('dashboard', {
    url: '/dashboard',
    templateUrl: 'partials/dashboard.html'
  })
}])

【讨论】：