AngularJS 1.2 $注入器:modulerr

时间:2013-08-17 09:56:56

标签: javascript angularjs

当使用角度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。

18 个答案:

答案 0 :(得分:633)

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

答案 1 :(得分:41)

我的错误在最后添加'()'消失了

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

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

答案 2 :(得分:40)

要添加到列表中还有一件事,因为这是谷歌搜索“错误:[$ 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 ...

然后还会生成'错误:[$ injector:modulerr] angular'错误。

答案 3 :(得分:24)

noob错误可能会忘记包含模块js

<script src="app/modules/myModule.js"></script>
index.html中的

文件

答案 4 :(得分:13)

对于那些使用压缩,捆绑和缩小文件的框架的人,请确保明确定义每个依赖项,因为这些框架倾向于重命名变量。在使用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: '/'
      });
}]);
关于Angular Dependency Annotation的

Read more here

答案 5 :(得分:12)

如果您在控制台([$injector:nomod], MINERR_ASSET:22)中出现此错误,请确保在加载AngularJS

之前未包含应用程序代码

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

答案 6 :(得分:8)

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

angular.module('MyApp');

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

答案 7 :(得分:7)

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' ]); 

答案 8 :(得分:6)

我遇到了同样的问题并尝试了所有可能的解决方案。但最后我从文档中了解到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>

答案 9 :(得分:5)

此错误的另一个触发因素是&#34;。&#34;在你的&#34之前;否则&#34;或路线定义中的任何其他路线:

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

全面停止,再一次。一定要爱JS!

答案 10 :(得分:4)

除了以下答案,如果您在控制台([$injector:nomod]MINERR_ASSET:22)中出现此错误,但一切似乎都正常,请确保您没有 rep包含在index.html中。

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

答案 11 :(得分:3)

如果您浏览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安装angular-route@X.Y.Z code.angularjs.org例如   &#34; // code.angularjs.org/X.Y.Z/angular-route.js"其中X.Y.Z是   您正在运行的AngularJS版本。

     

然后通过将模块添加为依赖项来加载应用程序中的模块   模块:

     

angular.module(&#39; app&#39;,[&#39; ngRoute&#39;]);有了这个,你就准备好了   开始!

答案 12 :(得分:2)

John Papa在this上提出了一个相当模糊的评论:有时当你收到错误时,就意味着你错过了一个文件。 其他时候表示模块在使用后定义。解决这个问题的一种方法是命名模块文件* .module.js并首先加载它们。

答案 13 :(得分:0)

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

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

<access origin="*"/>

修好了。

答案 14 :(得分:0)

它是一个喷油器错误。您可能使用了大量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 :(得分:0)

有时我在项目之间切换并在同一个端口上依次运行项目时看到了这个错误。在那种情况下,goto chrome Developer Tools&gt;网络并尝试检查实际写入的js文件:if the file match with the workspce。要解决此问题,请在网络下选择Disable Cache

答案 16 :(得分:0)

几个月后,我返回开发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(){...}

答案 17 :(得分:0)

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

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

并且有效。 因此,请检查您的标签。