I am trying to get the most basic possible ng-Idle implementation working in node.js on my devbox. For this purpose, I took the minimal sample shown on this link and set it to what was the minimum minimal installation of node.js , which I implemented using the instructions that I registered on the file sharing site using this link . All I did with the working minimal node.js application was to get into the minimalistic working application,
1.) Tyoe bower install ng-idle in the root folder of the client application
2.) Comment on all the old index.html
3.) Paste the code below from the link above into index.html and change only the URL links to angular.js and angular-idle.min.js to the actual relative paths of these files in the project. (I confirmed that both links point to actual js libraries.
4.) Enter grunt serve in the root folder of the client where the application is located.
The above steps ran the application 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 someone is interested in a full working application that recreates this simple problem, I put it in a tar ball and sent it to the 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 work in this basic node.js installation?
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>