Search code examples
javascriptangularjsdomangularjs-ng-route

Angularjs ngRoute not working: Uncaught Error: [$injector:modulerr]

I am trying to figure out why I have this error:

Uncaught Error: [$injector:modulerr]

I have the following code in index.html

<!DOCTYPE html>
<html ng-app="MainApp">
<head>
<meta charset="utf-8">
    <link rel='stylesheet' type='text/css' href='core/sty.css'>
    <script src="core/CS/ang/angular.min.js"></script>
    <script src="core/CS/ang/angular-resource.min.js"></script>
    <script src="core/CS/ang/angular-route.min.js"></script>
</head>
    <body>
    <div id="header-cont">
        <div id="header">
            <ul style="list-style:none;">
                <li style="display:inline;float:left;"><font style="font-size:38px;top:-5px;left:-1px;position:fixed;">title</font></li>
                <li class="menu">News</li>
                <li class="menu"><ul class="sub-menu">
                    <a href="/admin/login"><li class="SMoption">1 First login</li></a>
                    <a href="/admin/register"><li class="SMoption">2 Duble register</li></a>
                      </ul>account</li>
            </ul>
        </div>
    </div>
  <ng-view></ng-view>
    <script src="core/CS/mainscript.js"></script>
    <script src="core/CS/config.js"></script>
    <script src="core/CS/controllers.js"></script>
    <script src="core/CS/modules.js"></script>
</body>
</html>



The mainscript.js

'use strict';

var appv = angular.module("MainApp", ['ngRoute','ngResource']);


And config.js

'use strict';

appv.config(function($routeProvider) {

  $routeProvider.
      when('/', {
        //controller: 'HomeController',
        templateUrl: 'views/home.html'
      }).
      when('/page/:pgId', {
        //controller: 'PageController',
        templateUrl: 'views/page.html'
      }).
      when('/article/:pgId/:artId', {
        //controller: 'ArticleController',
        templateUrl: 'views/article.html'
      }).
      when('/admin/:adCode', {
        //controller: 'AdminController',
        templateUrl: 'views/admin.html'
      }).
  otherwise({templateUrl: 'views/home.html'});
    $locationProvider.html5Mode(true);
});




As you can see I have included the ng-route.js, ngRoute module, but something doesn't work...

Solution

  • you enable the html5 mode by adding $locationProvider.html5Mode(true); but you didn't inject the $locationProvider provider into the config function, adding that will solve the problem :)

    appv.config(function($routeProvider, $locationProvider ) {
.........