使用 AngularJS 的 IE 11 中的 $injector:modulerr 错误答案

【问题标题】：$injector:modulerr error in IE 11 Using AngularJS使用 AngularJS 的 IE 11 中的 $injector:modulerr 错误
【发布时间】：2016-10-03 16:56:51
【问题描述】：

我开发了一个 AngularJS 应用程序，它可以在 Firefox、Opera、Safari、Edge 和 Chrome 上运行，但不能在 IE 11 上运行。

这是我在 IE 11 中打开应用程序时收到的具体错误消息：

[$injector:modulerr] 未能实例化模块 TicketSystemApp 到期 to：错误：[$injector:modulerr] 无法实例化模块 TicketSystemControllers 由于：错误：[$injector:nomod] 模块 'TicketSystemControllers' 不可用！你要么拼错了模块名称或忘记加载它。

我的模块应用似乎没有加载。

这是我的整个脚本加载：

  <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Angular js -->
<script src= "js/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src = "js/ui-bootstrap-tpls-1.2.1.js"></script>
<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/md-data-table.min.js"></script>
<script src="js/toArrayFilter.js"></script>
<!-- auto-scroll module  -->
<script src="bower_components/angular-scroll-glue/src/scrollglue.js"></script>

<script src = "js/app.js"></script>
<!-- Controllers -->
<script src = "js/controllers.js"></script>
<script src ="js/globalFunctions.js"></script>
<!-- Custom File Upload Angular -->
<script src="js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="js/ng-file-upload.min.js"></script>
<!-- FACTORY -->
<script src = "js/authInterceptor.js"></script>


<!-- Services -->
<script src="js/auth.js"></script>
<script src="js/session.js"></script>

<!-- loading bar -->
<script  src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>

我有这个作为我的 html 标签：

<html lang="en" ng-app="TicketSystemApp" xmlns:ng="http://angularjs.org" class="ng-app:TicketSystemApp" id="ng-app">

我的头标签里确实有这个：

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

我已尝试手动引导，但我只收到两次相同的错误消息。

这是我的 app.js（只是初始化）：

    var TicketSystemApp = angular.module('TicketSystemApp',[
    'ngRoute',
    'TicketSystemControllers',
  'angular-loading-bar',
    'ngAnimate',
    'ui.router',
    'ui.bootstrap',
  'ngMaterial',
  'md.data.table',
  'angular-toArrayFilter'
]);

这是我的 controller.js（只是初始化）。我用这个模块来包含所有控制器：

var TicketSystemControllers = angular.module('TicketSystemControllers',[
    'ngRoute',
    'ui.router',
    'ui.bootstrap',
    'angular-loading-bar',
    'ngAnimate',
    'ngMaterial',
    'ngMessages',
    'ngFileUpload',
    'md.data.table',
    'bootstrapLightbox',
    'luegg.directives'

    ]);

【问题讨论】：

如果您不向我们展示您的 JS，我们实际上无法诊断任何内容。请包含TicketSystemApp 的来源，并考虑删除所有不相关的额外 HTML/JS 标记。
在调试时也使用非缩小版的 angular.js，这样您可以获得更详细的错误消息。
Harris，我已经包含了我的 app.js。 Lex，谢谢你的建议。
@KentaGoto 当您将此标记为 Internet Explorer 问题时，是因为您只在 IE 中测试过它，还是它实际上在其他浏览器中有效？
@HarrisWeinstein 我已经测试过，它适用于所有其他现代浏览器。此错误消息非常特定于 IE。相同的代码，在以下浏览器的控制台中没有错误消息：Firefox、Opera、Safari、Edge 和 Chrome

标签： javascript html angularjs internet-explorer

【解决方案1】：

Kenta，看起来您实际上并没有创建控制器。您所做的是创建了两个模块，这是您的意图吗？如果是这样，那很好，但您需要重新调整脚本并确保清除缓存。 IE 11 有一个严重的缓存问题。你的脚本应该这样排序

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

我还注意到您有一个全局函数文件。如果您在引用它的其他两个文件中有任何内容，则该文件应该是第一个。我建议像这样设置你的脚本。

<script src= "js/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src = "js/ui-bootstrap-tpls-1.2.1.js"></script>
<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/md-data-table.min.js"></script>
<script src="js/toArrayFilter.js"></script>
<script src="bower_components/angular-scroll-glue/src/scrollglue.js"></script>
<script src="js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="js/ng-file-upload.min.js"></script>
<script  src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>


<script src = "js/controllers.js"></script>
<script src = "js/app.js"></script>
<script src ="js/globalFunctions.js"></script>
<script src="js/auth.js"></script>
<script src="js/session.js"></script>
<script src = "js/authInterceptor.js"></script>

除非我看到你所有的 JS，否则我不知道这是否是确切的顺序，但我认为这非常接近。通常，您希望您创建的所有文件以正确的顺序位于您的底部，所有供应商/第 3 方文件以正确的顺序位于顶部。

【讨论】：

没错 Ohjay44，我打算创建一个单独的模块来管理多个控制器。建议我在启动此应用程序时执行此操作。您正在查看我的所有脚本。如果我复制并粘贴您的代码，它不仅在 IE 11 中不起作用，而且在所有现代浏览器中也不起作用。我已经对它进行了两种方式的测试，之前和之后加载了 controller.js。无论哪种方式，我都会遇到同样的错误。
Kenta 您收到的错误是由于未订购的脚本造成的。不幸的是，如果没有看到整体情况并且不知道每个自定义脚本的意图是什么，那么很难为外部人员进行调试。至于为控制器使用单独的模块，我建议不要这样做，我还会指导您使用指令路由而不是控制器路由。 AngularJS 旨在作为组件（指令）工作。
Kenta 你能告诉我 globalFunctions、auth、session 和 authInterceptor 是否有任何依赖关系？他们是否也在使用 app.js 或 controllers.js 中的模块？如果是这样，他们需要在控制器和应用程序之后出现，我可以调整我的答案以反映这一点。
感谢 Ohjay44。我正在使用自定义指令，我只是注入多个部分，每个部分都有自己的控制器。我认为您对脚本的看法绝对正确。感谢您的帮助！
globalFunctions.js -> app.js。 authInterceptor -> app.js。 auth.js -> app.js。 session.js -> app.js

【解决方案2】：

在声明 Angular 模块之前加载控制器

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

如果您将顺序更改为

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

它应该可以工作。

也许与toArrayFilter.js 相同？

你必须确定，模块定义是在你加载一些控制器、指令或工厂之前完成的！！！

【讨论】：

以前是这样的。我认为它确实与脚本的顺序有关，但我无法弄清楚。我一直在来回移动东西。同样的错误

【解决方案3】：

在我的例子中，它使用了 const val = something。当我将其更改为 var val = something 时，错误消失了。

【讨论】：