UI-router $stateChangeStart not working at all

Question

this is my app.js

var $stateProviderRef = null;
var $urlRouterProviderRef = null;

var acadb = angular.module('acadb', [
'ngRoute',
'ui.router',
'ngAnimate',
'ui.bootstrap',

'acadb.controllers',
'acadb.services',
'acadb.filters',
'acadb.directives',

'ngResource',

'angularMoment',
'angularFileUpload',
'ui.materialize',
'angular-toArrayFilter',
'ngSanitize',
'metatags',
])


.run(['$rootScope', '$state', '$stateParams','$http', function($rootScope,     $state, $stateParams,$http) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

    .config(['$locationProvider', '$stateProvider', '$urlRouterProvider',       '$httpProvider',
    function($locationProvider, $stateProvider, $urlRouterProvider,      $httpProvider) {

  // XSRF token naming
  $httpProvider.defaults.xsrfHeaderName = 'x-dt-csrf-header';
  $httpProvider.defaults.xsrfCookieName = 'X-CSRF-TOKEN';

  //$httpProvider.interceptors.push('httpInterceptor');
  $urlRouterProvider.otherwise("/");



    $stateProvider



        .state('home', {
            url: "/",
            templateUrl: '/partials/tpl/welcome.html',
        })
        .state('jobseeker', {
            url: "/jobseeker",
            templateUrl: '/partials/dashboard.php',

        })
        .state('register', {
            url: "/register",
            templateUrl: '/partials/auth/register.blade.php',
        })
        .state('login', {
            url: "/login",
            templateUrl: '/partials/tpl/login.html',
        })

      $locationProvider.html5Mode({
    enabled: false
  });
  $stateProviderRef = $stateProvider;
  $urlRouterProviderRef = $urlRouterProvider;

}])

 .run(function($rootScope, $location, AuthenticationService, FlashService, MetaTags,$state ) {
        console.log('ds');
        $rootScope.$on('$stateChangeStart', function(event, next, current) {
            event.preventDefault();
            console.log('sd');
            //if(!AuthenticationService.isLoggedIn()) {
            //    console.log(current);
            //    console.log(next);
            //
            //
            //
            //    event.preventDefault();
            //    $state.go('login');
            //    FlashService.show("Please log in to continue.");
            //}
            //

        });
    }
)

all i realy want in life is just to console log a string on a state change.. why doesnt the second console log fire on stateChangeStart?

this is frustrating. i have the exact same logic in another app that is working just fine

Answer 1

It seems like ui.router and ngRoute might not work together. Get rid of ngRoute package and all dependend actions and try again.

Answer 2

To enable these state events, include the stateEvents.js file in your project, e.g.,

<script src="stateEvents.js"></script>

and also make sure you depend on the ui.router.state.events angular module, e.g.,

angular.module("myApplication", ['ui.router', 'ui.router.state.events']

https://ui-router.github.io/ng1/docs/latest/modules/ng1_state_events.html