CODEWITHSUNDEEP
angularjs
bob.mazzo
bob.mazzo

Reputation: 5637

Angular module not available when following John Papa's Angular Testing course

I'm running through a Pluralsight for angular testing at Play by Play: Angular Testing, and the first module I add is throwing an NG exception out of the gate.

angular.js:68 Uncaught Error: [$injector:nomod] Module 'app.people' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

http://errors.angularjs.org/1.5.8/$injector/nomod?p0=app.people

I've been through this many times before, but for some reason I can't find my error today.

DETAILS:

The Angular version is v1.5.8.

My app folder structure is represented in this image, and you'll notice the new people folder I added as per the course:

App folder structure

The new app.people module is :

(function(){
  'use strict';

  angular.module('app.people',[
    'app.core',
    'app.widgets',
    'app.layout'
  ]);
});

And I've added the app.people module to app.module :

(function() {
'use strict';

angular.module('app', [
 'app.core',
 'app.widgets',
 'app.admin',
 'app.people',         // ** NEW PEOPLE MODULE **
 'app.dashboard',
 'app.layout'
]);

})();

And after running gulp dev-serve from a Win 7 cmd prompt. My index.html file is updated as follows (NB. the people.module.js file injected below the <!-- build:js js/app.js --> section) :

<!DOCTYPE html>
<html ng-app="app">

<head>
  <style>    
    .ng-hide {
      display: none!important;
    }
  </style>
  <title ng-bind="title">
    angular-test
  </title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <base href="/">

  <!-- build:css styles/lib.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="/bower_components/toastr/toastr.css" />
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:css styles/app.css -->
  <!-- inject:css -->
  <link rel="stylesheet" href="/.tmp/styles.css">
  <!-- endinject -->
  <!-- endbuild -->
</head>

<body>
  <div>
    <div ng-include="'app/layout/shell.html'"></div>
    <div id="splash-page" ng-show="showSplash">
      <div class="page-splash">
        <div class="page-splash-message">
          angular-test
        </div>
        <div class="progress progress-striped active page-progress-bar">
          <div class="bar"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- build:js js/lib.js -->
  <!-- bower:js -->
  <script src="/bower_components/jquery/dist/jquery.js"></script>
  <script src="/bower_components/angular/angular.js"></script>
  <script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <script src="/bower_components/extras.angular.plus/ngplus-overlay.js"></script>
  <script src="/bower_components/moment/moment.js"></script>
  <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="/bower_components/toastr/toastr.js"></script>
  <script src="/bower_components/angular-animate/angular-animate.js"></script>
  <script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:js js/app.js -->
  <!-- inject:js -->
  <script src="/src/client/app/app.module.js"></script>
  <script src="/src/client/app/admin/admin.module.js"></script>
  <script src="/src/client/app/blocks/exception/exception.module.js"></script>
  <script src="/src/client/app/blocks/logger/logger.module.js"></script>
  <script src="/src/client/app/blocks/router/router.module.js"></script>
  <script src="/src/client/app/core/core.module.js"></script>
  <script src="/src/client/app/dashboard/dashboard.module.js"></script>
  <script src="/src/client/app/layout/layout.module.js"></script>
  
  <!-- ****** NEW PEOPLE MODULE INJECTED HERE ***** -->
  <script src="/src/client/app/people/people.module.js"></script>
  
  <script src="/src/client/app/widgets/widgets.module.js"></script>
  <script src="/src/client/app/admin/admin.controller.js"></script>
  <script src="/src/client/app/admin/admin.route.js"></script>
  <script src="/src/client/app/blocks/exception/exception-handler.provider.js"></script>
  <script src="/src/client/app/blocks/exception/exception.js"></script>
  <script src="/src/client/app/blocks/logger/logger.js"></script>
  <script src="/src/client/app/blocks/router/router-helper.provider.js"></script>
  <script src="/src/client/app/core/config.js"></script>
  <script src="/src/client/app/core/constants.js"></script>
  <script src="/src/client/app/core/core.route.js"></script>
  <script src="/src/client/app/core/dataservice.js"></script>
  <script src="/src/client/app/dashboard/dashboard.controller.js"></script>
  <script src="/src/client/app/dashboard/dashboard.route.js"></script>
  <script src="/src/client/app/layout/ht-sidebar.directive.js"></script>
  <script src="/src/client/app/layout/ht-top-nav.directive.js"></script>
  <script src="/src/client/app/layout/shell.controller.js"></script>
  <script src="/src/client/app/layout/sidebar.controller.js"></script>
  <script src="/src/client/app/people/people.controller.js"></script>
  <script src="/src/client/app/people/people.route.js"></script>
  <script src="/src/client/app/widgets/ht-img-person.directive.js"></script>
  <script src="/src/client/app/widgets/ht-widget-header.directive.js"></script>
  <!-- endinject -->

  <!-- inject:templates:js -->
  <!-- endinject -->
  <!-- endbuild -->
</body>

</html>

If you can help me determine why my app.people module is causing the NG exception, I would appreciate.

thanks, Bob

Upvotes: 0

Views: 346

Answers (1)

bob.mazzo
bob.mazzo

Reputation: 5637

It took me all this time to finally run the test task, grunt test to get a clue as to what my problem what. Turns out the IIFE was missing the final () closing parenths as follows :

(function(){
  'use strict';

  angular.module('app.people',[
    'app.core',
    'app.widgets',
    'app.layout'
  ]);
})();

Application now running successfully, which now registers the new People menu item and route:

enter image description here

Upvotes: 1

Related Questions