CODEWITHSUNDEEP
javascriptangularjs
Anton
Anton

Reputation: 33

Angular app fails to instastiate due to Error: [$injector:modulerr]

I am currently working in setting up the structure for an angular app and can't get around this error. Below is the complete error message: 

    Failed to instantiate module app due to:
    Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=a...)
    at Error (native)
    at http://127.0.0.1:8080/assets/libs/angular/angular.min.js:6:416
    at http://127.0.0.1:8080/assets/libs/angular/angular.min.js:40:60
    at q (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:7:355)
    at g (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:39:135)
    at http://127.0.0.1:8080/assets/libs/angular/angular.min.js:39:304
    at q (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:7:355)
    at g (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:39:135)
    at eb (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:43:164)
    at c (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:20:463

My setup is as follows:

index.html

<body ng-app="app">
<header>

</header>

<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">

    <div ng-view></div>

</div>

<footer>

</footer>

<script type="text/javascript" src="assets/libs/angular/angular.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-route/angular-route.min.js"></script>

<!-- Modules -->
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/app.core.js"></script>
<script type="text/javascript" src="app/app.module.js"></script>

<!-- Controllers -->
<script type="text/javascript" src="app/components/homepage/homepageController.js"></script>

app.module.js

    angular.module('app', [
    'ngRoute',
    'app.routes',
    'app.core'
]);

app.routes.js

angular
.module('app.routes', ['ngRoutes'])
.config(function($routeProvider) {
    $routeProvider

        //root route
        .when('/', {
            templateUrl: 'app/components/homepage/homepageView.html',
            controller: 'homepageCtrl'
        });
});

app.core.js

angular
    .module('app.core', []);

I'm using core for all the controllers, but the issue seems to be with what I am loading in app.module.js...

Can anyone give an idea of what's going wrong?

Here is a plunkr https://plnkr.co/edit/Uv5fEvVZzmWguu32t4a9

Upvotes: 1

Views: 1979

Answers (1)

henrikmerlander
henrikmerlander

Reputation: 1574

The correct name for ['ngRoutes'] should be ['ngRoute'].

Updated Plunker: https://plnkr.co/edit/8W7QFndiTvtqfHCy6UWt?p=preview

Upvotes: 2

Related Questions