【问题标题】:AngularJS Uncaught Error: $injector:modulerrAngularJS 未捕获的错误:$injector:modulerr
【发布时间】:2017-01-29 01:42:51
【问题描述】:

我知道有上百万个这样的问题,而且我已经用 AngularJS 编码了一段时间,但这个问题很不寻常。

2 周前,我为客户部署了一个网站,一切运行良好。然后客户决定他想要一个小改动,所以在进行更改之前,我在本地服务器上运行了网站,以确保一切正常。

然后这个错误就弹出来了……我不知道是什么意思,也没有对代码做任何改动。它与完美运行的已部署站点相同。有谁知道这个错误是什么意思?

Failed to instantiate module crsportal due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=c...)
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:6:412
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:40:134
    at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:7:355)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:39:222)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:39:391
    at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:7:355)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:39:222)
    at db (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:43:246)
    at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:20:359

我可以给你代码,因为也许我在不知不觉中改变了一些东西。

crsportal.js

(function () {
  'use strict';

  angular
    .module('crsportal', [
      'crs.authentication',
      'crs.config',
      'crs.routes',
      'crs.profiles.controllers',
      'profile.services',
      'route.controller'
    ]);

  angular
    .module('crs.config', []);

  angular
    .module('crs.profiles.controllers', []);

  angular
    .module('crs.routes', ['ngRoute']);

  angular
    .module('profile.services', []);

  angular
    .module('route.controller', []);

  angular
    .module('crsportal')
    .run(run);

  run.$inject = ['$http'];

    /**
    * @name run
    * @desc Update xsrf $http headers to align with Django's defaults
    */
  function run($http) {
      $http.defaults.xsrfHeaderName = 'X-CSRFToken';
      $http.defaults.xsrfCookieName = 'csrftoken';
    }

})();

index.html

<!DOCTYPE html>
<html>
<head>
  <title>CRS Client Portal</title>

  <base href="/" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- The HTML5 Shim is required for older browsers, mainly older versions IE -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  <!--[if lt IE 7]>
    <div style=' clear: both; text-align:center; position: relative;'>
        <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
    </div>
  <![endif]-->

  <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-84093208-1', 'auto');
      ga('send', 'pageview');
    </script>
  {% include 'stylesheets.html' %}
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body ng-app="crsportal" class="loginpage">
  <div class="container-fluid" ng-controller="LoginController as vm">
      {% include 'login.html' %}
  </div>

  {% include 'javascripts.html' %}
</body>
</html>

编辑:添加信息

authentication.module.js

(function () {
  'use strict';
  angular
    .module('crs.authentication', [
      'authentication.controllers',
      'authentication.services'
    ]);

  angular
    .module('authentication.controllers', []);

  angular
    .module('authentication.services', ['ngCookies']);
})();

javascripts.html

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap-material-design/dist/js/material.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap-material-design/dist/js/ripples.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/underscore/underscore.js' %}"></script>

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


<script type="text/javascript" src="{% static 'bower_components/ngDialog/js/ngDialog.js' %}"></script>
<script type="text/javascript" src="{% static 'lib/snackbarjs/snackbar.min.js' %}"></script>

<script type="text/javascript" src="{% static 'javascripts/crsportal.js' %}"></script>

<script type="text/javascript" src="{% static 'javascripts/config.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/routes.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/authentication.module.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/services/authentication.services.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/controllers/login.controller.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/controllers/logout.controller.js' %}"></script>

【问题讨论】:

  • 错误:[$injector:modulerr] errors.angularjs.org/1.5.7/$injector/modulerr?p0=c...) 这个完整的 url 是什么?
  • 找不到一个角模块。你必须弄清楚是哪一个。
  • errors.angularjs.org/1.5.7/$injector/… .....(太长,无法包含整个链接)
  • 您需要向我们展示更多信息才能提供帮助。您包含的所有脚本在哪里?和你引用的模块?
  • 在开发过程中尝试使用未缩小版本的 Angular(和其他)。错误消息更详细。此外,您在上面添加的链接仍然被截断

标签: angularjs


【解决方案1】:

确保有crs.authentication 的定义:

//i added this
angular.module('crs.authentication', []);

angular
 .module('crs.config', []);

angular
  .module('crs.profiles.controllers', []);
//make sure no other module references ngRoute or this could be a problem as well.  if it does add it as a depenency
angular
  .module('crs.routes', ['ngRoute']);

angular
  .module('profile.services', []);

angular
  .module('route.controller', []);
//i moved this to last
angular
  .module('crsportal', [
  'crs.authentication',
  'crs.config',
  'crs.routes',
  'crs.profiles.controllers',
  'profile.services',
  'route.controller'
]);

显示此功能的小提琴:http://jsfiddle.net/ncapito/ku3c33bj/

【讨论】:

  • 请详细说明,以便我修复。
  • 模块不需要以任何特定的顺序定义。在配置和运行模块之前,Angular 会计算出依赖关系树
  • 你是对的@Phil 我说错了。谢谢你叫我出来。我正在玩的小提琴坏了,因为我没有正确设置我的依赖项。干杯。
【解决方案2】:

您缺少运行时尚未实例化的“crs.authentication”模块

  angular
    .module('crsportal', [
      'crs.authentication',
      'crs.config',
      'crs.routes',
      'crs.profiles.controllers',
      'profile.services',
      'route.controller'
    ]);

AngularJS: Uncaught Error: [$injector:modulerr] Failed to instantiate module?

【讨论】:

  • 抱歉,我不确定您的意思是什么?该链接描述了有人在他们的脚本之后加载 angular.js 的问题。这不是同一个问题,除非我遗漏了什么。
  • Angular 可以乱序加载模块。
  • @Phil 对,但你真的认为在这种情况下是这样吗?
  • @JamesBrace 不知道,因为 OP 似乎表明它现在可以工作,从所有外观来看,它应该一直都有。我怀疑某种特定的环境问题。
猜你喜欢
  • 2016-05-09
  • 2014-06-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-11-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多