$stateChangeStart not firing in ES6, Using Webpack and Bable

[shivkumarganesh]

Hi, I am using UI-Router and want to check for the $stateChangeStartevent but I am not able to catch it anyways. I have written the code in the run block but nothing works out there. Is there a bug or am I doing something wrong

/*Importing Styles for the application*/

import 'bootstrap/dist/css/bootstrap.css';
import './style/style.css';
import 'angular-wizard/dist/angular-wizard.min.css';
import 'nvd3/build/nv.d3.min.css';
import 'ng-datepicker/src/css/ngDatepicker.css';
import './style/animate.css';
import 'ng-notifications-bar/css/ngNotificationsBar.css';
import 'ng-toast/dist/ngToast.min.css';
import 'ng-toast/dist/ngToast-animations.min.css';
import 'angular-loading-bar/src/loading-bar.css';

/*Importing javascript dependencies*/

import angular from 'angular';
import uirouter from 'angular-ui-router';
import angular_animate from 'angular-animate'
import angularSanatize from 'angular-sanitize';
import formly from 'angular-formly';
import formlyBootstrap from 'angular-formly-templates-bootstrap';
import uibootstrap from 'angular-bootstrap-npm';
import ngMessages from 'angular-messages';
import angularLoadingBar from 'angular-loading-bar';

import 'angular-ui-utils/modules/mask/mask.js';
import 'ng-toast';
import 'ng-notifications-bar';
import 'moment';
import 'ng-datepicker';
import 'angular-breadcrumb';
import 'd3';
import 'nvd3';
import angularnvd3 from 'angular-nvd3';
import 'angularjs-datepicker';
import 'angular-local-storage';
import 'angular-wizard';
import 'angularjs-scroll-glue';
import jQuery from 'jquery'

import 'bootstrap';
import 'api-check';

/*Importing Routing*/
import routing from './config/route-config';

/*Import Constants*/
import chpConstants from './config/url.constants';
/*Importing all the directives*/
import menu from './features/utils/menu';
import header from './features/utils/header';
import breadcrumb from './features/utils/breadcrumb';

/*Importing Features*/
import auth from './features/auth';
import dashboard from './features/dashboard';
import programs from './features/programs';
import device from './features/device';

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
    ])
    .config(routing)
    .run(['$rootScope', ($rootScope) => {
        $rootScope.$on("$stateChangeStart", function(evt, to, toP, from, fromP) { console.log("Start:   " + message(to, toP, from, fromP)); });
        $rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP) { console.log("Success: " + message(to, toP, from, fromP)); });
        $rootScope.$on("$stateChangeError", function(evt, to, toP, from, fromP, err) { console.log("Error:   " + message(to, toP, from, fromP), err); });
    }]);

Let me know if there is something I need to change. This does not work at all. But the applciation is working pretty smooth

[eddiemonge]

What version of things are you running? Have you looked at the compiled code to see if its the same?

[shivkumarganesh]

This is what it compiles to, Is there anything wrong could you please assist me @eddiemonge

_angular2.default.module('chpApp', [_angularUiRouter2.default, _angularAnimate2.default, _angularBootstrapNpm2.default, _angularFormly2.default, _angularFormlyTemplatesBootstrap2.default, _angularMessages2.default, _angularLoadingBar2.default, 'ngNotificationsBar', 'jkuri.datepicker', 'LocalStorageModule', 'ncy-angular-breadcrumb', 'mgo-angular-wizard', 'luegg.directives', 'ngToast', 'ui.mask',
  /*Application Modules*/
  _angularNvd2.default, _url2.default, _menu2.default, _header2.default, _breadcrumb2.default, _auth2.default, _dashboard2.default, _programs2.default, _device2.default
]).config(_routeConfig2.default).run(['$rootScope', function($rootScope) {
  $rootScope.$on("$stateChangeStart", function(evt, to, toP, from, fromP) {
    console.log("Start:   " + message(to, toP, from, fromP));
  });
  $rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP) {
    console.log("Success: " + message(to, toP, from, fromP));
  });
  $rootScope.$on("$stateChangeError", function(evt, to, toP, from, fromP, err) {
    console.log("Error:   " + message(to, toP, from, fromP), err);
  });
}]);

[eddiemonge]

why does it say angular2? could you create a plnkr example with the compiled code?

[shivkumarganesh]

I am using Webpack and it uses the following statements while compiling

`var _angular = __webpack_require__(122);

var _angular2 = _interopRequireDefault(_angular);`

Since its a big project I can't just extract a small piece. Is there anything wrong in my code?

[eddiemonge]

just a quick glance doesnt look like it

[christopherthielen]

It looks like you copied/pasted this logging code from the http://bit.ly/UIR-Plunk but you didn't copy the message() function

  function message(to, toP, from, fromP) { 
    return from.name  + angular.toJson(fromP) + " -> " + to.name + angular.toJson(toP);
  }

  $rootScope.$on("$stateChangeStart",   function(evt, to, toP, from, fromP)      { console.log("Start:   " + message(to, toP, from, fromP)); });
  $rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP)      { console.log("Success: " + message(to, toP, from, fromP)); });
  $rootScope.$on("$stateChangeError",   function(evt, to, toP, from, fromP, err) { console.log("Error:   " + message(to, toP, from, fromP), err); });

You should have seen an error about ReferenceError: message is not defined in your console.

http://bit.ly/UIR-SOF

[shivkumarganesh]

@christopherthielen I am using alpha release and one of the person prompted me as mentioned below in stackoverflow http://bit.ly/20VG3Ha. Is there a problem with the Release where the statechange is deprecated.

[eddiemonge]

Use they are deprecated and disabled. See the release notes at https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0

[christopherthielen]

In 1.0 you can enable the trace service:

.run($trace) {
  $trace.enable(1)
}

[christopherthielen]

release notes:

All state events, (i.e. $stateChange* and friends) are deprecated and disabled by default; re-enable them by including the ng1/stateEvents.js file, and depend on the ui.router.state.events angular module in your application.

[efuturetoday]

are there any alternatives or replacements for "$stateChange* and friends" so far?

[shivkumarganesh]

Newer versions are following something called transition hooks. They work pretty well and are well documented too. I am using those for now. On 7 Apr 2016 14:39, "Oliver Haase" notifications@github.com wrote:

are there any alternatives or replacements for "$stateChange* and friend" ? :)

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-router/issues/2577#issuecomment-207042728