AngularJS : Uncaught Error: [$injector:modulerr] when using updated version of angularJS

Question

I used older version of angularJS (1.1.4) for my test project (I want to learn angularJS). When I change angularJS script version to latest I got this error:

  Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.8/$injector/modulerr?p0=contactsManager&p1=…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.8%2Fangular.min.js%3A38%3A435)

I don't know what is causing this error... Does someone knows where's the problem?

UPDATE:

After removing .min from angularJS.js I got cleaner error message so here is it:

Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.3.8/$injector/unpr?p0=%24routeProvide

Here is code:

JS:

//application.js
var app = angular.module('contactsManager', []);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/contacts',
            {
                controller: 'ContactsController',
                templateUrl: './application/templates/contacts.html'
            })
        .when('/add-contact',
            {
                controller: 'ContactAddController',
                templateUrl: './application/templates/addContact.html'
            })
        .when('/edit-contact/:contactId',
            {
                controller: 'ContactEditController',
                templateUrl: './application/templates/editContact.html'
            })
        .when('/display-contact/:contactId',
            {
                controller: 'ContactDetailsController',
                templateUrl: './application/templates/displayContact.html'
            })
        .otherwise({ redirectTo: '/contacts' });
});

HTML:

<!DOCTYPE html>
<html data-ng-app="contactsManager">
<head>
    <title>Contacts</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/custom.css" rel="stylesheet" />
</head>
<body>

    <div class="navbar navbar-top">
        <div class="navbar-inner">
            <div class="container">
                <h2>Contacts</h2>
            </div>
        </div>
    </div>

    <div ng-view class="example-animate-container"
    ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-resource.min.js"></script>

    <script src="application/application.js"></script>
    <script src="application/controllers/controllers.js"></script>
    <script src="application/services/contactsService.js"></script>
</body>
</html>

In the future, remove .min from angular's script path to get a better error message. — New Dev
– New Dev, Commented Dec 22, 2014 at 20:53
also data-ng-app="contactsManager" to ng-app="contactsManager" — Filippo oretti
– Filippo oretti, Commented Dec 22, 2014 at 20:58

tymeJV · Accepted Answer · 2014-12-22 21:03:51Z

2

Newer versions of Angular have ngRoute as a separate module that you have to include in your project.

<script src="//code.angularjs.org/X.Y.Z/angular-route.js"></script>

https://docs.angularjs.org/api/ngRoute

And update your app initialization with an injection of ngRoute

var app = angular.module('contactsManager', ["ngRoute"]);

edited Dec 22, 2014 at 21:03

answered Dec 22, 2014 at 20:53

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jureispro Over a year ago

I tried your solution and included angular-route.js . Now I got error this error: Error: [$injector:unpr] Unknown provider: $routeProvider

New Dev Over a year ago

You also need to add a dependency of ngRoute: angular.module('contactsManager', ['ngRoute']);

jureispro Over a year ago

@NewDev I need to update application.js with peace of code that you suggested?

jureispro Over a year ago

I have manned to resolve issue with code that you suggested. I will mark your answer as a correct one. Thank you

tymeJV Over a year ago

@NewDev -- Ahh - forgot that part - added the ngRoute injection to the answer.

Collectives™ on Stack Overflow

AngularJS : Uncaught Error: [$injector:modulerr] when using updated version of angularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related