angularjsngrouteangularjs-injector

Injector:modulerrr error even a after adding ngRoute. AngularJs

I am having a hard time figuring out why I am still having this error:

angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=portalEncomiendasApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fmodulerr%3Fp0%3Dapp.home.module%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.25%252F%2524injector%252Fnomod%253Fp0%253Dapp.home.module%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.25%252Fangular.min.js%253A6%253A450%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.25%252Fangular.min.js%253A20%253A494%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.25%252Fangular.min.js%253A21%253A502%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.25%252Fangular.min.js%253A33%253A267%250A%2520%2520%2520%2520at%2520r%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.25%252Fangular.min.js%253A7%253A290)%250A%2520%2520%2520%2520at%2520e%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.25%252Fangular.min.js%253A33%253A207)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.25%252Fangular.min.js%253A33%253A284%250A%2520%2520%2520%2520at%2520r%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.25%252Fangular.min.js%253A7%253A290)%250A%2520%2520%2520%2520at%2520e%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.25%252Fangular.min.js%253A33%253A207)%250A%2520%2520%2520%2520at%2520gc%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.25%252Fangular.min.js%253A36%253A309)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A6%3A450%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A34%3A97%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A290)%0A%20%20%20%20at%20e%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A207)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A284%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A290)%0A%20%20%20%20at%20e%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A207)%0A%20%20%20%20at%20gc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A36%3A309)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A170)%0A%20%20%20%20at%20fc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A387)

I have my index:

<html ng-app="portalEncomiendasApp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta name="description" content="Portal Encomiendas Internacionales">
    <meta name="author" content="">
    <title>Portal Encomiendas Internacionales</title>
    <meta name="mobile-web-app-capable" content="yes">
    <base href="/">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css"/>
</head>
<body>

        <div ng-view></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/script.js"></script>
</body>

my script.js

var portalEncomiendasApp = angular.module('portalEncomiendasApp',
[
    'ngRoute',
    'app.home.module'
]);

// configure our routes
portalEncomiendasApp.config(function ($locationProvider, $routeProvider) {

    $locationProvider.html5Mode(true);

$routeProvider

    .when('/', {
        templateUrl: 'pages/home/home.html',
        controller: 'mainController'
    })
        .otherwise({ redirectTo: '/' });
});

And my home and main controller are empty so far.

What am I missing? I tried downloading the files, using the minified version and I also looked here:

Angularjs 1.2.x Injector:modulerrr error even a after adding ngRoute

And that it why I have that version of angular-route, but nothing worked so far.

Solution

  • Check this plunkr

    I have made 3 changes to make it a working plunkr:

    1. I removed 'app.home.module' injection as it wasnt there in your module.
    2. For plunkr to run I added <base href="." />
    3. Changes script.js path

    Tip: Try to use angular.js when in dev mode rather than angular.min.js, because a you get better readable error messages when you use non minified files. (which you certainly need in dev environment)