angular ng-idle not working, unknown provider

Question

in my index.html, I include the file as

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

and in app.js

angular.module('app', [ uirouter,
                        routing,
                        angularResource,
                        localStorage,
                        home,
                        activity,
                        'chart.js',
                        'ngAnimate',
                        'rzModule',
                        'ui.bootstrap',
                        jsonService,
                        otherService,
                        customers,
                        'angularUtils.directives.dirPagination',
                        notifications,
                        'textAngular',
                        'ngSanitize',
                        'MassAutoComplete',
                        material,
                        countrySelect,
                        'ngIdle'
                      ])

and the config file

.config(function(IdleProvider) {
        IdleProvider.idle(5);
        IdleProvider.timeout(5);
    })
    .run(['Idle', function(Idle){
        // start watching when the app runs. also starts the Keepalive service by default.
        Idle.watch();
    }])
    .controller('ctrl', function($scope) {
        $scope.$on('IdleTimeout', function() {
            let time = new Date();
            console.log('idle timeout at ', time);
        });

        $scope.$on('IdleStart', function() {
            let time = new Date();
            console.log('idle start at ', time);
        });
    })

but browser always says

angular.min.js:117Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=tProvider%20%3C-%20t%20%3C-%20ctrl

Unknown provider: tProvider <- t <- ctrl

Answer 1

t in this case appears to be the minified reference to $scope in your "ctrl" controller.

If you're using minification, you'll need to make sure you use Angular's DI annotation everywhere, ie

.config(['IdleProvider', function(IdleProvider) {
    // ...
}]).controller('ctrl', ['$scope', function($scope) {
    // ...
}])