AngularJS 1.2 $injector:modulerr

Posted 2023-02-19

技术标签:

【中文标题】AngularJS 1.2 $injector:modulerr【英文标题】： 【发布时间】：2013-08-19 16:42:46 【问题描述】：

当使用 angular 1.2 而不是 1.07 时，以下代码不再有效，为什么？

'use strict';

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

app.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) 
        $locationProvider.html5Mode(true);
        $routeProvider.
        when('/', 
            templateUrl: 'part.html',
            controller: 'MyCtrl'
        ).
        otherwise(
            redirectTo: '/'
        );
    
]);

问题出在注入器配置部分 (app.config)：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=muninn&p1=Error%…eapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0rc1%2Fangular.min.js%3A31%3A252)

如果我没记错的话，这个问题是从 angular 1.1.6 开始的。

【问题讨论】：

【参考方案1】：

问题是由于缺少 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']);

【讨论】：

如果您不确定缺少哪个模块，请使用未缩小的 angular.js，它会给出可读的错误消息：

"Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument."

嗯，我正在使用 bower，它提供了 .map 文件 - 我想知道为什么 Chrome 仍然向我显示缩小文件中的错误。感谢@Mart 的提醒！ @arg20，你会在这里找到答案：github.com/angular/angular.js/commit/… 天哪，我一直在到处寻找解决方案。我从 1.0 升级到 1.2 并收到此错误。我能找到的唯一建议是确保 angular-route.js 被包括在内，它是……不是 Angular 文档的粉丝。无论如何谢谢你！我投了赞成票。如果在定义模块时使用 angular.module('myModule') 而不是 angular.module('myModule',[]) 可能会出现此错误。 ***.com/questions/16260538/…【参考方案2】：

通过在末尾添加这个“()”，我的错误消失了

(function()
    var home = angular.module('home',[]);

    home.controller('QuestionsController',function()
        console.log("controller initialized");
        this.addPoll = function()
            console.log("inside function");
        ;
    );
)();

【讨论】：

【参考方案3】：

还有一件事要添加到列表中，因为这是谷歌搜索“错误：[$injector:modulerr] angular”时出现的第一个结果：

如果您的“index”html 中的应用名称与主 javascript 应用定义中的应用名称不匹配，这也会产生此错误。

例如，如果您的 HTML 如下所示：

    </head>
    <body ng-app="myWebSite">

        <!-- My Web Site -->
        <p>About my web site...</p>

        etc ...

您的 JavaScript 看起来像这样（即应用名称有错字 - myWebCite 而不是 myWebSite）：

/** Main AngularJS Web Application */ 
var app = angular.module('myWebCite', [ 'ngRoute' ]); 

/** Configure the Routes */ 
app.config(['$routeProvider', function ($routeProvider)  
  etc ...

那么也会产生“Error:[$injector:modulerr] angular”错误。

【讨论】：

我非常接近这个。我已经设置了 ng-app="app"... 然后再没有设置模块。所以它触发了错误。作为初学者，我刚刚删除了 ="app" 部分以使我的示例代码正常工作。后来，我设置了正确的模块和路由... :)【参考方案4】：

一个菜鸟错误可能是忘记包含模块 js

<script src="app/modules/myModule.js"></script>

index.html 中的文件

【讨论】：

令人惊讶的是，调试/错误消息的角度有多糟糕。哈哈。我对自己说，不，我不能犯这个简单的错误。我多次通过了你的答案。但它解决了我的问题。这是关于缺少一些导入【参考方案5】：

如果您在控制台([$injector:nomod], MINERR_ASSET:22) 中出现此错误，请确保在加载AngularJS 之前未包含您的应用程序代码

我正在这样做，一旦我修复了订单，错误就消失了。

【讨论】：

【参考方案6】：

对于那些使用压缩、捆绑和缩小文件的框架的人，请确保明确定义每个依赖项，因为这些框架往往会重命名您的变量。我在使用 ASP.NET BundleConfig.cs 将我的应用脚本捆绑在一起时发生了这种情况。

之前

app.config(function($routeProvider) 
    $routeProvider.
      when('/', 
          templateUrl: 'list.html',
          controller: 'ListController'
      ).
      when('/items/:itemId', 
          templateUrl: 'details.html',
          controller: 'DetailsController'
      ).
      otherwise(
          redirectTo: '/'
      );
);

之后

app.config(["$routeProvider", function($routeProvider) 
    $routeProvider.
      when('/', 
          templateUrl: 'list.html',
          controller: 'ListController'
      ).
      when('/items/:itemId', 
          templateUrl: 'details.html',
          controller: 'DetailsController'
      ).
      otherwise(
          redirectTo: '/'
      );
]);

Read more here 关于 Angular 依赖注解。

【讨论】：

【参考方案7】：

我刚刚遇到了同样的错误，在我的情况下，这是由 angular.module 中的第二个参数丢失引起的 - 希望这可以帮助遇到同样问题的人。

~~angular.module('MyApp');~~

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

【讨论】：

这是我的问题；在使用 angular.module('my.Namespace').directive('myDirective', [ ...【参考方案8】：

add to link
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>

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

【讨论】：

忘记了使用特定依赖时必须包含src！【参考方案9】：

我遇到了同样的问题并尝试了所有可能的解决方案。但最后我从文档中得知 ngRoute 模块现在已分离。看看这个link

解决方案： 在 angular.min.js 脚本之后添加 cdn angular-route.js

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

【讨论】：

【参考方案10】：

此错误的另一个触发因素是离开“。”在您的“否则”或您的路线定义中的任何其他路线之前：

  app.config(['$routeProvider',
     function($routeProvider) 
        $routeProvider.
           when('/view1', 
              templateUrl: 'partials/view1.html',
              controller: 'Ctrl1'
           ).
           otherwise(
              redirectTo: '/viewCounts'
           );
     ]);

又一次被句号羞辱。一定要爱上 JS！

【讨论】：

【参考方案11】：

除了下面的答案之外，如果您在控制台中遇到此错误（[$injector:nomod]、MINERR_ASSET:22），但一切似乎都正常，请确保您没有重复包含在您的索引.html。

因为如果您有重复的包含文件、使用此模块并且包含在具有实际模块声明的文件之前，也会引发此错误。

【讨论】：

【参考方案12】：

如果你通过angularjs的官方教程https://docs.angularjs.org/tutorial/step_07

注意：从 AngularJS 版本 1.2 开始，ngRoute 是独立的模块并且必须通过加载额外的 angular-route.js 来加载文件，我们通过上面的 Bower 下载。

另外请注意来自 ngRoute api https://docs.angularjs.org/api/ngRoute

安装首先在你的 HTML 中包含 angular-route.js：

你可以从以下位置下载此文件：

Google CDN 例如 //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js 鲍尔例如bower install angular-route@X.Y.Z code.angularjs.org 例如 "//code.angularjs.org/X.Y.Z/angular-route.js" 其中 X.Y.Z 是您正在运行的 AngularJS 版本。

然后通过将模块添加为依赖项将其加载到您的应用程序中模块：

angular.module('app', ['ngRoute']);有了它，你就准备好了开始了！

【讨论】：

【参考方案13】：

John Papa 在this 相当模糊的评论中提供了我的问题：有时当您收到该错误时，这意味着您丢失了一个文件。 其他时候表示模块是在使用后定义的。轻松解决此问题的一种方法是将模块文件命名为 *.module.js 并首先加载它们。

【讨论】：

【参考方案14】：

这是一个注射器错误。你可能使用了很多 JavaScript 文件，所以注入器可能会丢失。

这里有一些：

var app = angular.module('app', 
    ['ngSanitize', 'ui.router', 'pascalprecht.translate', 'ngResource', 
     'ngMaterial', 'angularMoment','md.data.table', 'angularFileUpload', 
     'ngMessages', 'ui.utils.masks', 'angular-sortable-view',          
     'mdPickers','ngDraggable','as.sortable', 'ngAnimate', 'ngTouch']
);

请检查您需要插入的注射器app.js

【讨论】：

【参考方案15】：

我的问题出在 config.xml 中。改变：

<access origin="*" launch-external="yes"/>

到

<access origin="*"/>

修复它。

【讨论】：

【参考方案16】：

有时，当您在项目之间切换并在同一端口上一个接一个地运行项目时，我会看到此错误。在这种情况下，转到 chrome Developer Tools > Network 并尝试检查实际编写的 js 文件：if the file match with the workspce。要解决此问题，请在网络下选择 Disable Cache。

【讨论】：

【参考方案17】：

几个月后，我回来开发一个 AngularJS (1.6.4) 应用程序，为此我选择了 Chrome (PC) 和 Safari (MAC) 在开发过程中进行测试。此代码在 IE 11.0.9600（Windows 7，32 位）上显示此 错误：$injector:modulerr 模块错误。

经过调查，很明显错误是由于使用了 forEach 循环，只是将所有 forEach 循环替换为正常的 for 循环让事情按原样工作......

这基本上是一个 IE11 问题（已回答 here）而不是 AngularJS 问题，但我想把这个回复放在这里，因为引发的异常是 AngularJS 异常。希望它对我们中的一些人有所帮助。

类似。不要使用 lambda 函数...只需将 ()=>... 替换为好的 ol' function()...

【讨论】：

【参考方案18】：

我遇到了这个问题，在逐行检查我的代码后，我看到了这个

 <textarea class="form-control" type="text" ng-model="WallDesc" placeholder="Enter Your Description"/>

我刚刚改成

     <textarea class="form-control" type="text" ng-model="WallDesc" placeholder="Enter Your Description"></textarea>

并且成功了。所以检查你的标签。

【讨论】：

以上是关于AngularJS 1.2 $injector:modulerr的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS入门

AngularJS 1.x系列：AngularJS简介及第一个应用

如何优化在大型 AngularJS 项目

支持多个版本的 AngularJS

angularjs和requirejs整合

webAPI+angularJS文件上传和下载