Angular error [$injector:modulerr] - injector nomod [closed] - angularjs

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this 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 <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>

Answer 1

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