Angular Routing; Error: $injector:modulerr Module Error

Question

I'm recieving an error when I inject my ngRoute into my module. or perhaps is somewhere else entirely. the error that I am getting in the console window links to this site below https://docs.angularjs.org/error/$injector/modulerr?p0=routingApp&p1=Error:%20%5Bng:areq%5D%20http:%2F%2Ferrors.angularjs.org%2F1.5.8%2Fng%2Fareq%3Fp0%3Dfn%26p1%3Dnot%2520a%2520function%252C%2520got%2520string%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:6:412%0A%20%20%20%20at%20sb%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:23:18)%0A%20%20%20%20at%20Pa%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:23:105)%0A%20%20%20%20at%20Function.cb.$$annotate%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:200:148)%0A%20%20%20%20at%20e%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:41:20)%0A%20%20%20%20at%20Object.invoke%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:41:243)%0A%20%20%20%20at%20d%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:39:418)%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:40:19%0A%20%20%20%20at%20q%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:7:355)%0A%20%20%20%20at%20g%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js:39:319

I've been searching online for a solution to this problem and I haven't found anything particularly helpful. well at least helpful enough to solve this. the code below is my angular.js file

        (function (angular) {
            'use strict';

            angular.module('routingApp', ['ngRoute'])
                   .controller('routeController', routeController)
                   .config('routeProvider', routeProvider);

            function routeProvider($routeProvider) {
                $routeProvider
                .when('/',{
                    templateUrl: 'index.html',
                    controller: 'routeController'
                })
                .when('/A', {
                    templateUrl: 'pageA.html'
                })
                .when('/B',{
                    templateUrl: 'pageB.html'
                });
            }

            function routeController() {
                var rc = this;
                rc.msg = 'Main Page';
            }

        })(angular);

my Index.html file below

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
    <script src="js/angular.js"></script>

    <body ng-app="routingApp" ng-controller="homeController as hc">
        <h3>Angular Routing</h3>
            <div class="main">
                <div class="nav">
                    <input type="button" class="homeButton" value="home"><a href="#/"></a></input>
                    <input type="button" class="buttonA" value="A"><a href="#A"></a></input>
                    <input type="button" class="buttonB" value="B"><a href="#B"></a></input>
                </div>
                    <p>{{hc.msg}}</p>

                <div ng-view></div>
            </div>
    </body>

I guess files are not getting downloaded from https..

Pankaj Parkar
– Pankaj Parkar

2016-10-26 19:58:00 +00:00
Commented Oct 26, 2016 at 19:58 — Pankaj Parkar
– Pankaj Parkar, Commented Oct 26, 2016 at 19:58

Sreekanth · Accepted Answer · 2016-10-26 20:20:35Z

Config takes a single argument that is a function, not a key value like controller declaration. That should fix the error. I also see it msg is being read from the homeController which doesnt exist in the code you provided. updated the same to use RouteController to get Main page message working. Here is the solution.

(function(angular) {
  'use strict';

  angular.module('routingApp', ['ngRoute'])
    .controller('routeController', routeController)
    //.config(routeProvider);

  function routeProvider($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'index.html',
        controller: 'routeController'
      })
      .when('/A', {
        templateUrl: 'pageA.html'
      })
      .when('/B', {
        templateUrl: 'pageB.html'
      });
  }

  function routeController() {
    var rc = this;
    rc.msg = 'Main Page';
  }


})(angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

<body ng-app="routingApp" ng-controller="routeController as rc">
  <h3>Angular Routing</h3>
  <div class="main">
    <div class="nav">
      <input type="button" class="homeButton" value="home">
      <a href="#/"></a>
      </input>
      <input type="button" class="buttonA" value="A">
      <a href="#A"></a>
      </input>
      <input type="button" class="buttonB" value="B">
      <a href="#B"></a>
      </input>
    </div>
    <p>{{rc.msg}}</p>


  </div>
</body>

Collectives™ on Stack Overflow

Angular Routing; Error: $injector:modulerr Module Error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related