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

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

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

[$injector:modulerr]未能实例化模块TicketSystemApp，原因是 收件人：错误：[$injector:modulerr]未能实例化模块 TicketSystemControllers由于以下原因导致：错误：[$injector:nomod]模块 “TicketSystemController”不可用！你要么拼错了 模块名称或忘记加载它

似乎我的模块应用程序未加载

以下是我的整个脚本加载：

  <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>

这是我的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'

    ]);

---

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

<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的

相同

您必须确保在加载某些控制器、指令或工厂之前已完成模块定义肯塔，看起来你根本没有真正创建控制器。您所做的是创建两个模块，这是您的意图吗？如果是这样，这很好，但您需要重新调整脚本并确保清除缓存。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，但我认为这是非常接近。通常，您希望所有创建的文件都按正确的顺序放在底部，所有供应商/第三方文件都按正确的顺序放在顶部。
在我的例子中，它使用的是constval=something。
当我将其更改为varval=something时，错误消失了。
如果您不向我们展示您的JS，我们实际上无法诊断任何东西。请包含源代码<代码> TigKeStaseApp，并考虑删去不相关的所有额外的HTML/JS标签。在调试时，还使用ANGURAL.JS的非缩小版本，这样您就可以得到更详细的错误消息。Harris，我已经包含了我的App.js。莱克斯，谢谢你的建议。@KentaGoto当你将此标记为Internet Explorer问题时，是因为你只在IE中测试过它，还是因为它实际上在其他浏览器中工作？@HarrisWeinstein我已经测试过，并且它在所有其他现代浏览器中都工作。此错误消息非常特定于IE。相同的代码，在以下浏览器的控制台中没有错误消息：Firefox、Opera、Safari、Edge和ChromeIt与以前一样。我认为这确实和脚本的顺序有关，但我不明白。我一直在来回移动东西。同样的错误虽然Ohjay44是正确的，但我打算创建一个单独的模块来管理多个控制器。我被建议在启动此应用程序时执行此操作。你看到了我所有的剧本。如果我复制并粘贴你的代码，它不仅不能在IE11中工作，而且不能在所有现代浏览器中工作。我已经用两种方法对它进行了测试，其中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
<script src = "js/app.js"></script>
<script src = "js/controllers.js"></script>

<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>