Angular error [$injector:modulerr] - injector nomod

Question

I have just created module and controller for my functionality and got following error:

Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=ContactsApp&p1=%5B%24injector%3Anomod%5D%

Following is my html code:

<div ng-app="ContactsApp" class="container">
    <div class="row" ng-controller="contactsCtrl">
        <div class="col-sm-12 padding-0">  <h2 class="text-center"> Contacts</h2>
            <div class="panel panel-default">
                <div class="panel-heading c-list">
                    <span class="title">Contacts</span>
                    <div class="pull-right">
                        <a data-toggle="modal" data-target="#upload-contacts" href="#upload-contacts" data-placement="top" title="Add Contact">
                            <span class="title "><i class="glyphicon glyphicon-plus"></i>Add</span>
                        </a>

                    </div>
                </div>
            </div>
            <div>

                 <!-- My contacts page -->
                {% if contributors.details or importedContacts.details%}
                    {% if not role %}
                        {% include 'mpb/mycontacts/mycontacts_contributed_team.html' %}
                    {% else%}
                        {% include 'mpb/mycontacts/mycontacts_contributors_rolewise.html' %}
                    {% endif %}

                {% elif not contributors.details and not importedContacts.details %}
                    <div class="no-contacts">
                        <h3 class="no-contacts-text">No Contacts to show</h3>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div id="upload-contacts" class="modal fade bs-example-modal-sm" tabindex="1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content bg-modal">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title text-center" id="mySmallModalLabel">Import your contacts &nbsp; <i class="glyphicon glyphicon-question-sign" rel="tooltip" title="click for help."></i></h4>
                </div>
                <div class="modal-body">
                    <!--upload your contacts-->

                  <div id="dvImportSegments" class="fileupload ">
                    <div class="btn btn-primary btn-block image-preview-input">
                                <span class=" glyphicon glyphicon-folder-open"></span>
                                <span class="image-preview-input-title">Import Contacts</span>
                                <input type="file" id="contactFileUpload" accept=".csv .vCard" name="File Upload"/> <!-- rename it -->
                            </div>
                  </div><!--end of upload your contacts--><br>
                </div>
            </div>
        </div>
    </div>
</div>

Below is js code: mycontacts.js

var app = angular.module('contactsApp', ['djangular-confirm', 'djangular-alert'])
            .config(function ($httpProvider, $interpolateProvider) {

            $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
            $httpProvider.defaults.headers.common['X-CSRFToken'] = '{$ csrf_value $}';
            $interpolateProvider.startSymbol('{$');
            $interpolateProvider.endSymbol('$}');
        });

        app.controller('contactsCtrl', function ($scope, $http, $location, $djconfirm, $djalert) {

        });

files I have included

    <script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/angular.min.js"></script>
<script src="/djangular/js/django-angular.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/angular-route.min.js"></script>

I think you forget injection in angular.module('contactsApp', []) or change scripts file indexing. — Durgpal Singh, May 31 '16 at 12:15
Possible duplicate of [AngularJS 1.2 $injector:modulerr](http://stackoverflow.com/questions/18287482/angularjs-1-2-injectormodulerr) — Always_a_learner, May 31 '16 at 12:21

score 2 · Accepted Answer · answered May 31 '16 at 12:16

2

The error is showing that there is no module named ContactsApp which is what is expected as main app module due to your ng-app value.

You registered contactsApp which is not the same due to case sensitivity.

In other words: ContactsApp != contactsApp

answered May 31 '16 at 12:16

charlietfl

170,828
13
121
150

Sorry guys I just noticed this after posting question. So frustrated by previous errors that I didn't debug it properly before posting over here. Please kindly vote to close. Thanks!! – Always_a_learner May 31 '16 at 12:22

Angular error [$injector:modulerr] - injector nomod

1 Answers1