Angular JS - Uncaught Error: [$injector:modulerr].

Question

Can you help me get rid of error "Uncaught Error: [$injector:modulerr]." I'm sick and tired of debugging Angularjs applications, it's very difficult to catch errors, i'm used to Java, and there is a simple to catch errors because i have a debugger. But in case AngularJS, it's impossible. Thanks a lot!

index.html

<!doctype html>
<html ng-app="customersApp">
  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
    <script src="app/controllers/app.js"></script>
    <script src="app/controllers/customersController.js"></script>
  </head>
  <body>
    <div class="container">
      <div ng-view></div>
    </div>
  </body>
</html>

customers.html

<div class="row">
     <h2>Customers</h2>
     Filter: <input type="text" ng-model="customerFilter.name">
     <br><br>
     <table class="table table-bordered">
       <tr class="active">
         <th ng-click="doSort('name')">Name</th>
         <th ng-click="doSort('city')">City</th>
         <th ng-click="doSort('orderTotal')">Order Total</th>
         <th ng-click="doSort('joined')">Joined</th>
       </tr>
       <tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reverse">
         <td>{{cust.name}}</td>
         <td>{{cust.city}}</td>
         <td>{{cust.orderTotal | currency}}</td>
         <td>{{cust.joined | date: 'yyyy-MM-dd'}}</td>
       </tr>
     </table>
</div>

app.js

(function(){
    var app = angular.module('customersApp', ['ngRoute']);
    app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'CustomersController',
                templateUrl: 'app/views/customers.html'
            })
            .otherwice({redirectTo: '/'});
    });
})();

customersController.js

(function(){
  var CustomersController = function($scope) {
    $scope.sortBy = 'name';
    $scope.reverse = false;
    $scope.customers = [
      {joined: '2012-12-02', name: 'John', city: 'Luhansh', orderTotal: 9.99},
      {joined: '2012-09-14', name: 'Sergey', city: 'Kyiv', orderTotal: 5.799},
      {joined: '2015-11-03', name: 'Denis', city: 'Warsaw', orderTotal: 1.35}
    ];
    $scope.doSort = function(propName) {
      $scope.sortBy = propName;
      $scope.reverse = !$scope.reverse;
    }
  };
  CustomersController.$inject = ['$scope'];

  angular.module('customersApp')
    .controller('CustomersController', CustomersController);

})();

first: use the non minified file, that will have expanded error messages. second: I understand your frustration but comments like "I'm sick and tired of debugging Angularjs applications" are not welcoming and are likely to drive away potential answers — Liviu T.
– Liviu T., Commented May 2, 2015 at 21:38
@LiviuT. I had already resolved the problem..that was typo of otherwice — Pankaj Parkar
– Pankaj Parkar, Commented May 2, 2015 at 21:39

Pankaj Parkar · Accepted Answer · 2015-05-02 21:35:31Z

2

Your problem is you had typo in your app.js

.otherwice({redirectTo: '/'}); should be .otherwise({redirectTo: '/'});

(function(){
    var app = angular.module('customersApp', ['ngRoute']);
    app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'CustomersController',
                templateUrl: 'app/views/customers.html'
            })
            .otherwise({redirectTo: '/'});
    });
})();

Working Plunkr

answered May 2, 2015 at 21:35

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

4 Comments

Denis Over a year ago

Thanks for answer! You're right! How to handle and catch errors in AngularJS? Is there any best way?

Pankaj Parkar Over a year ago

@Denis you need to write your own exception provider..that will accept error message and log them in console

Deblaton Jean-Philippe Over a year ago

go visit the link written next to your error in the console -_-' Sorry for beeing rude, but if you don't read your error, you wont go anywhere

Pankaj Parkar Over a year ago

@Denis you need to look at this link which will give you an idea docs.angularjs.org/api/ng/service/$exceptionHandler

Collectives™ on Stack Overflow

Angular JS - Uncaught Error: [$injector:modulerr].

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related