AngularJS: Unknown provider: $idleProvider

Question

A lot of other people with similar problems but the resolutions don't seem applicable to my specific issue of this.

I am attempting to use the ngIdle (https://github.com/HackedByChinese/ng-idle) library but can't seem to get it to run without this error appearing - Uncaught Error: [$injector:modulerr] Failed to instantiate module myAuditModule due to: Error: [$injector:unpr] Unknown provider: $idleProvider

Here is my module code,

(function () {
    app = angular.module("myAuditModule", ['ui.bootstrap', 'ngRoute', 'ngCookies', 'ngDragDrop', 'ngIdle']);

    // configure the routes
    app.config(function ($routeProvider, $idleProvider, $keepaliveProvider) {

        $idleProvider.idleDuration(10 * 60); // 10 minutes idle
        $idleProvider.warningDuration(30); // 30 second warning
        $keepaliveProvider.interval(5 * 60); // 5 minute keep-alive ping

        $routeProvider

             //route for the logging in page
            .when('/', {
                templateUrl: 'Views/Login.html',
                controller: 'loginController'
            })

    });

    })();

The file is being included in my project and it is being shown as there in the developer console when the site is run -

   <script src="/Scripts/angular-idle.js"></script>

The only dependency is that you need to be using angular 1.2 or above, which I am.

Any ideas?

Discrimination

Answer 1

Replace $idleProvider to IdleProvider in app.config and try

  app.config(function ($routeProvider, IdleProvider, KeepaliveProvider) {

    IdleProvider.idleDuration(10 * 60); // 10 minutes idle
    IdleProvider.warningDuration(30); // 30 second warning
    KeepaliveProvider.interval(5 * 60); // 5 minute keep-alive ping

    .....
});

Also replace $keepaliveProvider to KeepaliveProvider

Weanling

Hi, thanks for the response. I am still getting the same issue just now idleprovider without the $ is unkown. If i search the angular-idle.js file I can't find any reference of IdleProvider so that might be why... In the link in my initial post I just copied that one file (angular-idle.js) from the github and put it in my project, is that not correct? Where should it be finding idleprovider. I'm at a bit of a loss here. – Discrimination

Ah nevermind, I forgot the capital letter change after taking the $ off :( – Discrimination

Answer 2

Try injecting IdleProvider instead of $idleProvider same goes for KeepAliveProvider

So your new code should be

(function () {
        app = angular.module("myAuditModule", ['ui.bootstrap', 'ngRoute', 'ngCookies', 'ngDragDrop', 'ngIdle']);

        // configure the routes
        app.config(function ($routeProvider, IdleProvider, KeepaliveProvider) {

            $idleProvider.idleDuration(10 * 60); // 10 minutes idle
            $idleProvider.warningDuration(30); // 30 second warning
            $keepaliveProvider.interval(5 * 60); // 5 minute keep-alive ping

            $routeProvider

                 //route for the logging in page
                .when('/', {
                    templateUrl: 'Views/Login.html',
                    controller: 'loginController'
                })

        });

        })();

Subatomic

Hi, thanks for the response. I am still getting the same issue just now idleprovider without the $ is unkown. If i search the angular-idle.js file I can't find any reference of IdleProvider so that might be why... In the link in my initial post I just copied that one file (angular-idle.js) from the github and put it in my project, is that not correct? Where should it be finding idleprovider. I'm at a bit of a loss here. – Discrimination

Ah nevermind, I forgot the capital letter change after taking the $ off :( – Discrimination