Angular: 'modulerr', "Failed to instantiate module

Question

I'm trying to learn Angular and hitting a brick wall trying to add routes to my application.

I keep getting presented this error

'modulerr', "Failed to instantiate module

From other stackoverflow questions i gather its not from loading ngRoute correctly but angular-route.js is loaded in the head, and ngRoute is declared in my module construct so i'm a bit confused

My index file is as followed

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
  <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
  <script src="https://cdn.firebase.com/libs/angularfire/1.1.2/angularfire.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/animations.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/services.js"></script>
</head>
<body ng-app="pgpChatApp">
  <div class="view-container">
    <div ng-view="" class="view-frame"></div>
  </div>
</body>
</html>

My app file

'use strict';

var pgpChatApp = angular.module('pgpChatApp', [
  'ngRoute',
  'firebase',
  'pgpChatAnimations',
  'pgpChatControllers',
  'pgpChatFilters',
  'pgpChatServices'
]);

pgpChatApp.config(["$routeProvider", function ($routeProvider) {
  $routeProvider.when("/home", {
    // the rest is the same for ui-router and ngRoute...
    controller: "userAuth",
    templateUrl: "partials/home.html"
  }).when("/account", {
    // the rest is the same for ui-router and ngRoute...
    controller: "AccountCtrl",
    templateUrl: "partials/msg_room.html",
    resolve: {
      // controller will not be loaded until $requireAuth resolves
      // Auth refers to our $firebaseAuth wrapper in the example above
      "currentAuth": ["Auth", function (Auth) {
        // $requireAuth returns a promise so the resolve waits for it to complete
        // If the promise is rejected, it will throw a $stateChangeError (see above)
        return Auth.$requireAuth();
      }]
    }
  });
}]);

My controller file

var pgpChatAppControllers = angular.module('pgpChatAppControllers', []);

pgpChatAppControllers.controller("userAuth", ["$scope", "$routeParams", "Auth",
  function ($scope, $routeParams, Auth) {
    $scope.createUser = function () {
      $scope.message = null;
      $scope.error = null;

      Auth.$createUser({
        email: $scope.email,
        password: $scope.password
      }).then(function (userData) {
        $scope.message = "User created with uid: " + userData.uid;
      }).catch(function (error) {
        $scope.error = error;
      });
    };

    $scope.removeUser = function () {
      $scope.message = null;
      $scope.error = null;

      Auth.$removeUser({
        email: $scope.email,
        password: $scope.password
      }).then(function () {
        $scope.message = "User removed";
      }).catch(function (error) {
        $scope.error = error;
      });
    };
  }]);

Has anyone got an idea what the fix is?

Thanks in advanced

[EDIT] Full exception message

http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=pgpChatAnimations&p1=Error: [$injector:nomod] http://errors.angularjs.org/1.3.15/$injector/nomod?p0=pgpChatAnimations at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:6:417 at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:21:412 at a (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:21:53) at w.bootstrap (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:21:296) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:35:116 at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:7:302) at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:34:399) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:35:63 at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:7:302)"

Where in your code is "modulerr" referenced? *note the double r's. — AndrewF
Loading angular after angularfire results in an additional error, angularfire is a firebase plugin for angular. @AndrewF i've included the full exception message above — James Kirkby
In the first file you have var pgpChatApp = angular.module('pgpChatApp', ...), then in the second: var pgpChatAppControllers = angular.module('pgpChatAppControllers', []) -- you probably don't want the second module, and should just add the controller to pgpChatApp. — pdenes
Okay then you should load js files as it is but without the protocols. Like src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js". Make sure for all of them — Vineet

GPicazo GPicazo · Accepted Answer · 2015-07-26T16:39:47

The url for angular-route is not working. Try using:

http://code.angularjs.org/1.2.0-rc.3/angular-route.js

Angular: 'modulerr', "Failed to instantiate module

2 Answers