AngularJS Uncaught Error: $injector:modulerr

Question

I know there are a million of these questions, and I've been coding with AngularJS for a while, but this one is unusual.

2 weeks ago I deployed a website for a client and everything was working beautifully. Then the client decided he wants a small change, so before making the changes I ran the website on a local server just to make sure everything is ok.

Then this error pops up... I have no clue what it means, and I haven't made any changes to the code. It's the same as the deployed site which runs perfectly. Would anyone know what this error means by any chance?

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

I can give you the code, because perhaps I changed something without realizing it.

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>

Edit: Added Info

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>

Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=c...) what is this full url? — NicolasMoise, Sep 21 '16 at 00:45
One of the angular module can't be found. You have to figure out which one. — NicolasMoise, Sep 21 '16 at 00:47
http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=crs.authentication&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.7%2F%24injector%2Fnomod%3Fp0%3Dcrs.authentication%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A6%3A412%0A%20%20%20%20at% ..... (too long to include entire link) — James Brace, Sep 21 '16 at 00:48
You need to show us more in order to help. Where are all the scripts you are including ? And modules you are referencing ? — Nix, Sep 21 '16 at 00:48
I usually just re-upload the files and force refresh the browser. The error is gone itself then. I guess it's because of incomplete upload. You can give it a try. — Shawn, Sep 21 '16 at 00:49
@NicolasMoise yeah sorry I know what module it is... let me update my post with the code — James Brace, Sep 21 '16 at 00:49
@Nix I added the javascripts.html and the module that is causing the error in the edit — James Brace, Sep 21 '16 at 01:05
Try using the unminified versions of Angular (and others) during development. The error messages are more verbose. Also, the link you added above is still truncated — Phil, Sep 21 '16 at 01:25

Nix · Answer 1 · 2016-09-22T11:22:00.730

-1

Make sure there is a definition for 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'
]);

Fiddle that shows this works: http://jsfiddle.net/ncapito/ku3c33bj/

edited Sep 22 '16 at 11:22

answered Sep 21 '16 at 10:41

Nix

57,072
29
149
198

Please elaborate so I can fix. – Nix Sep 21 '16 at 23:45
Modules do not need to be defined in any particular order. Angular works out the dependency tree before the modules are configured and run – Phil Sep 21 '16 at 23:46
You are correct @Phil I misspoke. Thanks for calling me out. The fiddle i was playing around with was breaking because I didn't have my dependencies set up right. cheers. – Nix Sep 22 '16 at 11:22

score -2 · Answer 2 · edited May 23 '17 at 12:00

-2

You are missing the "crs.authentication" module it has not been instantiated by the time you run

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

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

edited May 23 '17 at 12:00

Community

1
1

answered Sep 21 '16 at 01:03

NicolasMoise

7,261
10
44
65

1

Sorry I'm not sure what you mean by that? The link describes the issue where someone loads angular.js after their script. This is not the same issue, unless I'm missing something. – James Brace Sep 21 '16 at 01:16
Angular can load modules out of order. – Phil Sep 21 '16 at 01:26
@Phil right but do you really think that is the case in this situation? – James Brace Sep 21 '16 at 01:36
@JamesBrace no idea as OP seems to indicate it now works which by all appearances, it should have all along. I suspect some kind of specific environment issue. – Phil Sep 21 '16 at 03:39

AngularJS Uncaught Error: $injector:modulerr

2 Answers2