AngularJS：未捕获的错误：[$injector:modulerr] 无法实例化模块？答案

【问题标题】：AngularJS: Uncaught Error: [$injector:modulerr] Failed to instantiate module?AngularJS：未捕获的错误：[$injector:modulerr] 无法实例化模块？
【发布时间】：2014-04-19 20:10:36
【问题描述】：

我是 AngularJS 的新手，我通过一些文档和教程来学习。我的问题是关于 Egghead 的视频系列，特别是这个视频，它演示了如何组合一个基本的搜索过滤器。我想在一个真正的应用程序中使用它，我正在为一个拥有小型蜡烛制作业务的朋友构建，但是当我将它修改为她的蜡烛而不是复仇者联盟演员时（如视频中演示的那样）我收到了这个错误：

未捕获的错误：[$injector:modulerr] 无法实例化模块 myApp，原因是：

错误：[$injector:nomod] 模块“myApp”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册一个模块，请确保您指定...

我将视频演示中的内容的编辑（数组中只有 3 个演员）版本复制到 jsfiddle 中，发现它仍然产生相同的错误。（作为参考，Egghead 演示在这里：http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter）。到目前为止，我已经在这个网站上阅读了至少六个类似的问题，并尝试了所有提供的解决方案，但没有一个能摆脱这个错误或导致复仇者联盟搜索——在视频演示中运行良好——实际运行正确。

HTML：

<div ng-app="myApp">
    <div ng-controller="AvengersCtrl">
        <input type="text" ng-model="search.$" />
        <table>
            <tr ng-repeat="actor in avengers.cast | filter:search">
                <td>{{actor.name}}</td>
                <td>{{actor.character}}</td>
            </tr>
        </table>
    </div>
</div>

Javascript：

var myApp = angular.module('myApp', []);
myApp.factory('Avengers', function () {
    var Avengers = {};
    Avengers.cast = [
        {
        name: "Robert Downey Jr.",
        character: "Tony Stark / Iron Man"
        }, 
        {
        name: "Chris Evans",
        character: "Steve Rogers / Captain America"
        },
        {
        name: "Mark Buffalo",
        character: "Bruce Banner / The Hulk"
        }
    ];
    return Avengers;
})

function AvengersCtrl($scope, Avengers) {
    $scope.avengers = Avengers;
}

简单地说，有人可以提供一个可行的解决方案并消除此错误，并用简单的英语（不是博士级别“Angular Obscurese”）解释是什么原因导致它（简而言之）以及什么需要做些什么来避免它？

编辑：道歉，但上面从教程中引用的 jsfiddle 链接不再有效。我已删除损坏的链接。提到的教程仍然可以查看。

【问题讨论】：

尝试在你的小提琴中使用 No Wrap - In Head：jsfiddle.net/Q5hd6
不要放在头部，而是放在身体的末端！
@ExpertSystem: 在这种情况下，body 或 head 都可以工作。我还在回答中添加了解释。
@ExpertSystem：还有一件事，加载选项适用于脚本窗口中的脚本，而不是框架脚本。
@KhanhTO：这正是 ng-cloak 的用途：)

标签： angularjs jsfiddle angularjs-module

【解决方案1】：

原来我收到这个错误是因为我请求的模块is not bundled in the minification prosses由于路径拼写错误

所以请确保您的模块存在于缩小的 js 文件中（请务必在其中搜索一个单词）

【讨论】：

【解决方案2】：

对于有相同错误但代码相似的人：

$(function(){
    var app = angular.module("myApp", []); 
    app.controller('myController', function(){

    });
});

删除 $(function(){ ... }); 解决了错误。

【讨论】：

【解决方案3】：

我不得不更改 js 文件，因此在它的开头包含“function()”，并在结尾行包含“()”。这样就解决了问题

【讨论】：

这是在 jsfiddle 中吗？这个问题特别与此有关，所以如果是，您能否发布一个指向您的小提琴的链接？谢谢！
这在 jsFiddle 中有效，无需添加我解释的修改，我在 jsfiddle 中尝试了您的代码，它工作正常，请参阅此处的代码 jsfiddle.net/SaifHarbia/ht4jme7q 请注意，您需要选择一个 Angular 库和 No Wrap-在框架和扩展下的中
嗯，是的，您只是重复了上面 Khanh TO 一年半前提供的第一个答案。这就是问题所在——使用 no-wrap。

【解决方案4】：

对于通过搜索错误消息在网络上找到此旧帖子的人来说，问题的另一个可能原因。

即使您已经完成了其他出色答案中描述的事情，您也可能在调用脚本时出现拼写错误。因此，请检查以确保您可以在脚本标签中使用正确的拼写。

【讨论】：

【解决方案5】：

尝试在您的小提琴中使用 No Wrap - In Head 或 No Wrap - in body：

工作小提琴：http://jsfiddle.net/Q5hd6/

解释：

当 DOM 完全加载时，Angular 开始编译 DOM。您注册代码以运行onLoad（小提琴中的onload选项）=>注册您的myApp模块为时已晚，因为angular开始编译DOM并且angular看到没有名为myApp的模块并引发异常。

通过使用No Wrap - In Head，您的代码如下所示：

<head>

    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>

    <script type='text/javascript'>
      //Your script.
    </script>

</head>

您的脚本有机会在 Angular 开始编译 DOM 之前运行，并且在 Angular 开始编译 DOM 时已经创建了 myApp 模块。

【讨论】：

非常好，感谢您的回复。但是，当我尝试在本地开发它并在我的浏览器中启动它时，我仍然遇到错误。显示的只是输入字段，没有表格。具体来说，我收到两个错误：-Uncaught ReferenceError: angular is not defined kandlepicker.js:1 和 -Error: [$injector:unpr] errors.angularjs.org/1.2.14/$injector/…。我究竟做错了什么？我按照建议在结束

【解决方案6】：

您必须使用 JSFiddle 加载选项：

将其设置为“No wrap - in body”而不是"onload"

工作小提琴：http://jsfiddle.net/zQv9n/1/

【讨论】：