Failed to instantiate module ngRoute

Question

why i have this error? this is my error: "Failed to instantiate module ngRoute"

Details:

"Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=Rerp&p1=Error%3A%2…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.11%2Fangular.min.js%3A17%3A350)"...

and

"Failed to instantiate module TestApp due to: Error: [$injector:modulerr] http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=...)"

and

"Failed to instantiate module ngRoute due to: Error: [$injector:nomod] http://errors.angularjs.org/1.3.11/$injector/nomod?p0=ngR..."

HTML:

<!DOCTYPE html>
<html lang="en" ng-app="TestApp">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Test</title>

  <!-- JQUERY -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>        

  <!-- BOOTSTRAP  -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js">     </script>
</head>

    <body ng-controller="MainCtrl">
      <div class="main">
        <div class="container" ng-view="">
      </div>     
  </div>  <!-- fine main -->

 <!-- ANGULAR -->
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
 <script scr="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.js"></script>
<script src="app.js"></script>  
</body>

</html>

APP.JS:

var TestApp = angular.module('TestApp', ['ngRoute']);
var configuration = {
  appPartialPath: "/partial/",
  appApiEntryPoint: "/api/"
 };

 TestApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
            .when('/moduli', {
                templateUrl: configuration.appPartialPath + 'moduli.html',
                controller: 'ModuliCtrl'
            })

            .otherwise({
                redirectTo: '/',
                controller: 'MainCtrl'
            });
}]);

 /* CONTROLLER MAIN FORM */
 TestApp.controller('MainCtrl', function ($scope) {
    console.log("APP STARTED");
 });

Is not duplicate! Because my Angularjs is 1.3.11! – Bonci Marco Jan 31 '15 at 14:41 — Bonci Marco, Jan 31 '15 at 14:41
Don't worry about it... :-) – Bonci Marco Feb 01 '15 at 20:09 — Bonci Marco, Feb 01 '15 at 20:09

score 3 · Accepted Answer · answered Jan 31 '15 at 14:54

I fixed your issue, if you still need it:

app.js:

var testApp = angular.module('testApp', ['ngRoute']);
var configuration = {
  appPartialPath: "/partial/",
  appApiEntryPoint: "/api/"
 };

 testApp.config(function ($routeProvider,$locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      });
 });

 /* CONTROLLER MAIN FORM */
 testApp.controller('MainCtrl', function ($scope) {
    console.log("APP STARTED");
 });

and index.html:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
    <title>Test</title>
    <!-- JQUERY -->
    <script src="https://code.angularjs.org/1.3.11/angular.js"></script>
    <script src="https://code.angularjs.org/1.3.11/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- BOOTSTRAP  -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </head>

  <body ng-app="testApp">
    <div class="main">
      <div ng-view="" class="container"></div>
    </div>
    <!-- fine main -->
    <script src="app.js"></script>
  </body>

</html>

The problem was, that you need to get both scripts in your head instead of your body so they are loaded before angular is executed. Additionally I fixed your $routeprovider, so you Mainctrl gets called correctly.

Here is a Plunkr I made to show the result.

Failed to instantiate module ngRoute

1 Answers1

Linked