IdleProvider.windowInterrupt is not a function

I am trying to get the most basic possible implementation of ng-Idle working in node.js on my devbox. Towards this end, I have taken the minimal sample shown at this link, and have installed it in what was a working minimal installation of node.js, which I implemented using the instructions which I have documented at a file sharing site at this link. All I did to the working minimal node.js app was to go into a minimalist working app,

1.) Tyoe bower install ng-idle in the root folder of the client app
2.) Comment out all of the old index.html
3.) Paste the code below from the link above into index.html, and only change the url links to angular.js and angular-idle.min.js to the actual relative paths of those files in the project. (I confirmed that both links point to the actual js libraries.
4.) Type grunt serve in the root of the client folder where the app is located.

The above steps launched the app in a web browser, but gave the following compilation error:

Error: [$injector:modulerr] Failed to instantiate module demo due to:
IdleProvider.windowInterrupt is not a function
@http://localhost:9000/:122:9

If anyone is interested in the complete working app that recreates this simple problem, I put it in a tar ball and posted it to a file sharing site, which you can download by clicking on this link.

What specific steps need to be taken to resolve this error so that ng-idle can run in this basic installation of node.js?

Here is index.html:

<html ng-app="demo">
  <head>
    <title title>NgIdle Sample</title>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/ng-idle/angular-idle.min.js"></script>

   <script type="text/javascript">
      var app = angular.module('demo', ['ngIdle']);
      app
      .controller('EventsCtrl', function($scope, Idle) {
        $scope.events = [];
        $scope.idle = 5;
        $scope.timeout = 5;
        $scope.$on('IdleStart', function() {
          addEvent({event: 'IdleStart', date: new Date()});
        });
        $scope.$on('IdleEnd', function() {
          addEvent({event: 'IdleEnd', date: new Date()});
        });
        $scope.$on('IdleWarn', function(e, countdown) {
          addEvent({event: 'IdleWarn', date: new Date(), countdown: countdown});
        });
        $scope.$on('IdleTimeout', function() {
          addEvent({event: 'IdleTimeout', date: new Date()});
        });
        $scope.$on('Keepalive', function() {
          addEvent({event: 'Keepalive', date: new Date()});
        });
        function addEvent(evt) {
          $scope.$evalAsync(function() {
            $scope.events.push(evt);
          })
        }
        $scope.reset = function() {
          Idle.watch();
        }
        $scope.$watch('idle', function(value) {
          if (value !== null) Idle.setIdle(value);
        });
        $scope.$watch('timeout', function(value) {
          if (value !== null) Idle.setTimeout(value);
        });
      })
      .config(function(IdleProvider, KeepaliveProvider) {
        KeepaliveProvider.interval(10);
        IdleProvider.windowInterrupt('focus');
      })
      .run(function($rootScope, Idle, $log, Keepalive){
        Idle.watch();
        $log.debug('app started.');
      });
    </script>
  </head>
  <body ng-controller="EventsCtrl">
    <div idle-countdown="countdown">
      <h1>Idle and Keepalive events</h1>
      <button type="button" ng-click="reset()">Reset manually</button>
      <ul>
        <li ng-repeat="event in events">{{event}}</li>
      </ul>

      <div idle-countdown="countdown">
        Timeout in {{countdown}} seconds.
      </div>

      <div>
        Change idle value <input type="number" ng-model="idle" />
      </div>
      <div>
        Change timeout value <input type="number" ng-model="timeout" />
      </div>
    </div>
  </body>
</html>

Recommended topics

Hot tags