Search code examples
javascriptangularjsfrontendngroute

$injector.modulerr issue


So I've been racking my brains for some time, looked at each and every line and I can't seem to find any mistake. Here are my codes:

HTML:

<body ng-app='myApp'>
<div class="wrapper">
  <nav>
    <ul ng-controller="pathController">
      <li ng-click="changePath('about')"><a href="#about">About</a></li>
      <li ng-click="changePath('contacts')"><a href="#contacts">Contacts</a></li>
      <li ng-click="changePath('login')"><a href="#login">Log In</a></li>
      <li ng-click="changePath('register')"><a href="#register">Join Now</a></li>
    </ul>
  </nav>
</div>
<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="node_modules/angular/angular.min.js" type="text/javascript"></script>
<script src="node_modules/angular-route/angular-route.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="scripts/controllers/pathController.js" type="text/javascript"></script>
</body>

app.js:

var app = angular.module("myApp", ['ngRoute', 'ngController']);

app.config(["$locationProvider", "$routeProvider"], 
  function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix("");
  $routeProvider.when('/', {
    templateUrl: "index.html"
  })
})

About that 'ngController' dependency - I added it afterwards, in the process of checking different things which could possibly fix it.

and pathController.js:

app.controller('pathController', function($scope) {
  $scope.changePath = function(pth) {
    window.location.pathname = pth;
  }
})

As you can see, $routeProvider is not the issue. Please take a look and see if you can solve my problem.

P.S. I am sorry, I forgot to add the error that I am getting, I only wrote it in the title, here it is:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.7.4/ ...

Thanks in advance!


Solution

  • Try

    var app = angular.module("myApp", ["ngRoute"]);
    
    app.config(["$locationProvider", "$routeProvider", 
     function($locationProvider, $routeProvider) {
     $locationProvider.hashPrefix("");
     $routeProvider.when('/', {
        templateUrl: "index.html"
     })
     }]
    )
    

    You have made below error:

    app.config(["$locationProvider", "$routeProvider"], <-- this ] bracket should not be closed here.

    Here is the working plunkr