Angular JS 未捕获错误：[$injector:modulerr]

Question

我遇到了 Angular JS 接收错误的问题：未捕获的错误：[$injector:modulerr]。 我的 JS 文件看起来

angular.module('MyApp', ['ngRoute']);
angular.module('MyApp',['ngResource']);
function TwitterCtrl($scope,$resource){
}

我还包括 angular-route-js

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js">     
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js">

Angular 文档说问题是http://docs.angularjs.org/api/ngRoute

Answer 1

尝试添加这个：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>

Answer 2

在开发环境中，我建议您使用not minified distributives 。 并且所有错误都变得更加有用！ 取而代之的angular.min.js ，使用angular.js 。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js">     
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js">

Answer 3

尝试添加：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js">

和：

angular.module('MyApp', ['ngRoute','ngResource']);
function TwitterCtrl($scope,$resource){
}

对于所有依赖项，您应该只调用angular.module一次，因为使用当前代码，您正在创建一个新的MyApp模块来覆盖前一个模块。

从角度文档：

请注意，使用 angular.module('myModule', []) 将创建模块 myModule 并覆盖任何名为 myModule 的现有模块。 使用 angular.module('myModule') 检索现有模块。

Answer 4

确保你的函数被包裹在一个闭包中，并在最后加上额外的 ()：

(function(){                                                                     

    var app = angular.module('myApp', []);                                     


})();  

Answer 5

我以前遇到过同样的问题，但我意识到我的主页 ( index.html ) 中没有包含“ app.js ”（主应用程序）。 因此，即使您包含了 AngularJS 所需的所有依赖项，您最终也可能会在控制台中出现该错误。 所以一定要确保在主页中包含必要的文件，你不应该有这个问题。

希望这可以帮助。

Answer 6

我有同样的问题。 你应该在任何函数之外输入你的 Angular js 代码，如下所示：

$( document ).ready(function() {});

Answer 7

该问题是由于缺少包含 ngRoute 模块引起的。 从 1.1.6 版开始，它是一个单独的部分：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

var app = angular.module('myapp', ['ngRoute']);

这是从以下获取参考： AngularJS 1.2 $injector:modulerr David answer

Answer 8

我收到此错误是因为我依赖于另一个未加载的模块。

angular.module("app", ["kendo.directives"]).controller("MyCtrl", function(){}...

所以即使我拥有所有的 Angular 模块，我也没有剑道模块。

Answer 9

好的，如果你得到一个Uncaught Error: [$injector:modulerr]并且 angular 模块在告诉你的错误中，你有一个重复的 ng-app 模块。

Answer 10

确保保存 angular.module 的变量结构正确。

这将失败并显示“未捕获的错误：[$injector:modulerr]”：

var angApp = angular.module("angApp");

这有效：

var angApp = angular.module("angApp", []);

这是一个偷偷摸摸的，因为错误消息并没有特别指向一件事（因此有各种各样的答案）。 此外，大多数 js linter 不会捕捉到细节。 坚持下去！

Answer 11

我遇到了完全相同的问题，解决方法是删除闭包：

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

变成：

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

Answer 12

该错误意味着依赖项注入器无法找到依赖项“ngResource”。 接受的答案中的脚本标签提供了这种依赖性。

如果您在依赖项中添加任何自定义模块但未添加用于包含包含依赖项的“.js”文件的脚本标记，您也会收到相同的错误。

Answer 13

只是为了以防万一，我遇到了这个问题，原因是因为当我捆绑我的 Angular 东西时，我将主应用程序文件引用为“AngularWebApp”而不是“AngularWebApp.js”，希望这会有所帮助。

Answer 14

我也有同样的问题，我刚刚从 BundleConfig.cs 文件中删除了以下代码行，我的代码工作正常。

BundleTable.EnableOptimizations = true;

Answer 15

不要在 cdn 链接脚本标签内加载 javascript。使用单独的脚本标签来加载 AngularJs 脚本。 我遇到了同样的问题，但我创建了一个单独的<script>然后错误消失了。