当 UI-Router ES6 中的状态更改时，$stateChangeStart 不会被触发?

I am using Bable for ES6 and webpack. I am on angular 1.x.x and building an application. Till now I did not hit any problem. I want to have a functionality where I can track all the Route Changes. I am using UI-Router. The problem is that $stateChangeStart is not getting triggered anyways. The code is mentioned below.

/*All includes are taken care of. Please look at the run method*/

angular.module('chpApp', [
        uirouter,
        angular_animate,
        uibootstrap,
        formly,
        formlyBootstrap,
        ngMessages,
        angularLoadingBar,
        'ngNotificationsBar',
        'jkuri.datepicker',
        'LocalStorageModule',
        'ncy-angular-breadcrumb',
        'mgo-angular-wizard',
        'luegg.directives',
        'ngToast',
        'ui.mask',
        /*Application Modules*/
        angularnvd3,
        chpConstants,
        menu,
        header,
        breadcrumb,
        auth,
        dashboard,
        programs,
        device
    ])
    .run(['$rootScope', function($rootScope) {
        $rootScope.$on('$stateChangeStart', () => {
            console.log('lol')
        })
    }])
    .config(routing);

请让我知道我做错了什么，因为状态正在改变，但 $stateChangeStart 事件永远不会被触发.run 方法是我连接 $stateChangeStart 监听器的地方.