简体   繁体   English

AngularJS 1.2 $injector:modulerr

[英]AngularJS 1.2 $injector:modulerr

When using angular 1.2 instead of 1.07 the following piece of code is not valid anymore, why?当使用 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: '/'
        });
    }
]);

the issue is in the injector configuration part (app.config):问题在于注入器配置部分(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) 

If I remember correctly this issue started with angular 1.1.6.如果我没记错的话,这个问题是从 angular 1.1.6 开始的。

The problem was caused by missing inclusion of ngRoute module.该问题是由于缺少包含 ngRoute 模块引起的。 Since version 1.1.6 it's a separate part:从 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']);

my error disappeared by adding this '()' at the end通过在最后添加这个“()”,我的错误消失了

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

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

One more thing to add to the list as this is the first result that comes up with a google search of 'Error: [$injector:modulerr] angular':要添加到列表中的另一件事,因为这是谷歌搜索“错误:[$injector:modulerr] angular”的第一个结果:

If you have a mismatch between your app name in your 'index'html' and in your main javascript app definition this can also generate this error.如果您的 'index'html' 中的应用程序名称与主 JavaScript 应用程序定义中的应用程序名称不匹配,这也会产生此错误。

For example if your HTML looks like this:例如,如果您的 HTML 如下所示:

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

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

        etc ...

And your JavaScript looks like this (ie has a typo on app name - myWebCite instead of myWebSite):你的 JavaScript 看起来像这样(即应用名称有一个错字 - myWebCite 而不是 myWebSite):

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

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

then the 'Error:[$injector:modulerr] angular' error will be generated also.那么'Error:[$injector:modulerr] angular' 错误也会产生。

A noob error can be forgetting to include the module js菜鸟错误可能是忘记包含模块 js

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

files in the index.html at all index.html 中的文件

If you have this error in console ([$injector:nomod], MINERR_ASSET:22) , make sure you are not including your application code before loading AngularJS如果您在控制台中有此错误([$injector:nomod], MINERR_ASSET:22) ,请确保在加载AngularJS之前没有包含您的应用程序代码

I was doing that and once I fixed the order, the error went away.我正在这样做,一旦我修复了订单,错误就消失了。

For those using frameworks that compress, bundle, and minify files, make sure you define each dependency explicitly as these frameworks tend to rename your variables.对于那些使用压缩、捆绑和缩小文件的框架的人,请确保您明确定义每个依赖项,因为这些框架倾向于重命名您的变量。 That happened to me while using ASP.NET BundleConfig.cs to bundle my app scripts together.我在使用 ASP.NET BundleConfig.cs将我的应用程序脚本捆绑在一起时发生了这种情况。

Before之前

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

After之后

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 about Angular Dependency Annotation.在此处阅读有关 Angular Dependency Annotation 的更多信息。

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

angular.module('MyApp');

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

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

I had the same problem and tried all possible solution.我遇到了同样的问题并尝试了所有可能的解决方案。 But finally I came to know from the documentation that ngRoute module is now separated.但最后我从文档中了解到ngRoute模块现在是分离的。 Have a look to this link看看这个链接

Solution: Add the cdn angular-route.js after angular.min.js script解决方案: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>

Another trigger for this error is leaving the "."此错误的另一个触发因素是离开“。” out before your "otherwise" or any other route in your route definition:在您的“否则”或您的路线定义中的任何其他路线之前:

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

Mortified by a full-stop, yet again.再次被句号羞辱。 Gotta love JS!必须爱JS!

Besides below answer, if you have this error in console ( [$injector:nomod] , MINERR_ASSET:22 ), but everything seems to work fine, make sure that you don't have duplicate includes in your index.html.除了下面的答案,如果您在控制台( [$injector:nomod]MINERR_ASSET:22 )中[$injector:nomod]此错误,但一切似乎都正常,请确保您的 index.html 中没有重复包含。

Because this error can also be raised if you have duplicate includes of the files, that use this module, and are included before the file with actual module declaration.因为如果您有重复的包含使用此模块的文件并且包含在具有实际模块声明的文件之前,也会引发此错误。

If you go through the official tutorial of angularjs https://docs.angularjs.org/tutorial/step_07如果你通过 angularjs 的官方教程https://docs.angularjs.org/tutorial/step_07

Note: Starting with AngularJS version 1.2, ngRoute is in its own module and must be loaded by loading the additional angular-route.js file, which we download via Bower above.注意:从 AngularJS 1.2 版开始,ngRoute 在它自己的模块中,必须通过加载额外的 angular-route.js 文件来加载,我们通过上面的 Bower 下载。

Also please note from ngRoute api https://docs.angularjs.org/api/ngRoute另请注意 ngRoute api https://docs.angularjs.org/api/ngRoute

Installation First include angular-route.js in your HTML:安装首先在 HTML 中包含 angular-route.js:

You can download this file from the following places:您可以从以下位置下载此文件:

Google CDN eg //ajax.googleapis.com/ajax/libs/angularjs/XYZ/angular-route.js Bower eg bower install angular-route@XYZ code.angularjs.org eg "//code.angularjs.org/XYZ/angular-route.js" where XYZ is the AngularJS version you are running. Google CDN eg //ajax.googleapis.com/ajax/libs/angularjs/XYZ/angular-route.js Bower eg bower install angular-route@XYZ code.angularjs.org eg "//code.angularjs.org/XYZ/ angular-route.js”,其中 XYZ 是您正在运行的 AngularJS 版本。

Then load the module in your application by adding it as a dependent module:然后通过将其添加为依赖模块将模块加载到您的应用程序中:

angular.module('app', ['ngRoute']); angular.module('app', ['ngRoute']); With that you're ready to get started!有了它,你就可以开始了!

John Papa provided my issue on this rather obscure comment: Sometimes when you get that error, it means you are missing a file. John Papa 就这个相当晦涩的评论提供了我的问题:有时,当您收到该错误时,这意味着您丢失了一个文件。 Other times it means the module was defined after it was used.其他时候这意味着模块是在使用后定义的。 One way to solve this easily is to name the module files *.module.js and load those first.一种轻松解决此问题的方法是将模块文件命名为 *.module.js 并首先加载它们。

Its an injector error.它是注射器错误。 You may have use lots of JavaScript files so the injector may be missing.您可能使用了大量 JavaScript 文件,因此可能缺少注入器。

Some are here:有些在这里:

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

Please check the injector you need to insert in your app.js请检查您需要在app.js插入的注入器

My problem was in the config.xml.我的问题出在 config.xml 中。 Changing:改变:

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

to

<access origin="*"/>

fixed it.修好了。

Sometime I have seen this error when you are switching between the projects and running the projects on the same port one after the other.有时,当您在项目之间切换并在同一端口上一个接一个地运行项目时,我会看到此错误。 In that case goto chrome Developer Tools > Network and try to check the actual written js file for: if the file match with the workspce .在这种情况下,转到 chrome Developer Tools > Network 并尝试检查实际编写的 js 文件: if the file match with the workspce To resolve this select Disable Cache under network.要解决此问题,请选择Disable Cache网络下的Disable Cache

After many months, I returned to develop an AngularJS ( 1.6.4 ) app, for which I chose Chrome (PC) and Safari (MAC) for testing during development.几个月后,我回来开发 AngularJS ( 1.6.4 ) 应用程序,为此我在开发过程中选择了 Chrome (PC) 和 Safari (MAC) 进行测试。 This code presented this Error: $injector:modulerr Module Error on IE 11.0.9600 (Windows 7, 32-bit).此代码在IE 11.0.9600 (Windows 7,32位)上显示此错误:$injector:modulerr 模块错误

Upon investigation, it became clear that error was due to forEach loop being used, just replaced all the forEach loops with normal for loops for things to work as-is...经过调查,很明显错误是由于使用了forEach循环,只需将所有forEach循环替换为正常的for循环即可按原样工作......

It was basically an IE11 issue (answered here ) rather than an AngularJS issue, but I want to put this reply here because the exception raised was an AngularJS exception.它基本上是一个 IE11 问题( 在此处回答)而不是 AngularJS 问题,但我想把这个回复放在这里,因为引发的异常是一个 AngularJS 异常。 Hope it would help some of us out there.希望它能帮助我们中的一些人。

similarly.相似地。 don't use lambda functions... just replace ()=>{...} with good ol' function(){...}不要使用 lambda 函数...只需将 ()=>{...} 替换为好的 ol' function(){...}

I had this problem and after check my code line by line i saw this我遇到了这个问题,在逐行检查我的代码后,我看到了这个

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

i just changed it to我只是把它改成

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

and it's worked.它奏效了。 so check your tags.所以检查你的标签。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM