Why isn't $stateChangeStart triggered when the state changes in UI-Router with ES6?

Currently, I am utilizing Bable for ES6 and webpack while working on an angular 1.x.x application. So far, I haven't encountered any issues. I am looking to implement a feature where I can keep track of all the Route Changes using UI-Router. However, I am facing a problem where the $stateChangeStart event is not being triggered. Below is the code snippet:

/*All necessary includes are already taken care of. Please review the run method below*/

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);

I would appreciate any insights on what might be going wrong, as the state is indeed changing but the $stateChangeStart event is not getting triggered. I have placed the run method where I am connecting with the $stateChangeStart listener.

My assumption is that it could be related to ES6, but I have been unable to find any relevant references so far. Thank you.

javascriptangularjsangular-ui-routerecmascript-6webpack

Answer №1

After encountering a similar issue, I discovered that the stateChange* events have been deprecated and turned off by default in ui-router version 1.0. I am currently using 1.0.0-alpha0. The functionality previously offered by these events can now be accessed through transition hooks. More information on this change can be found in the release notes for version 1.0 alpha, which can be viewed at: https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0

Answer №2

To build upon Eoin's response, you have the option to utilize the hooks on $transitions within a component controller like this

        $transitions.onStart({}, ()=>{
            $log.log('In start')
        });
        $transitions.onFinish({}, ()=>{
            $log.log('In finish')
        });

https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0

Answer №3

To elaborate on the other responses, one way to manually trigger the legacy 0.2.* stateChange-events is by using a specific module. Copy and paste the code below into a new file named ui-router-polyfill-wrapper.js:

'use strict';

import uiRouter from 'angular-ui-router';
import 'angular-ui-router/release/stateEvents';

let customModule = angular
    .module('ui-router-polyfill-wrapper', [
        uiRouter,
        'ui.router.state.events',
    ]);

export default customModule;

After creating this module, replace 

require('angular-ui-router').name
with 
require('./ui-router-polyfill-wrapper').default.name
in the dependency array of your angular app module.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Vanilla JavaScript to Disable a Specific Key Combination on a Web Page

On a completely random English-Wikipedia editing page, there exists a way to add content (for example, "test") and save it using the existing key combination of Alt+Shift+S. My goal is to specifically prevent this action without removing the save button b ...

javascriptjqueryhtmlreturnkeyboard-shortcuts

Exploring the dynamic duo of Django and DataTables: a guide on incorporating

Have you cautiously attempted to fetch data using AJAX, and displaying it in a datatable works seamlessly, but the issue arises when attempting to search or sort within the table. It seems that upon doing so, the data is lost, necessitating a page reload. ...

javascriptdjangoajaxdatatable

Angular 5's external JavaScript library

After thoroughly researching this subject, I find myself still lacking comprehension. An example may be the key to understanding. As a newcomer to Angular, my goal is to create a mathematical application for mobile using Ionic. Despite investing two weeks ...

javascriptangular

Activate lightbox on click to swap image source temporarily

I have implemented the Materialize CSS "Material Box" lightbox plugin, but I am facing an issue. I want all the thumbnails to be uniform in size, and when clicked, the full photo should be displayed. Currently, I am using the onclick function to change th ...

javascriptonclickmaterializelightbox

Remove the most recent row that was dynamically inserted into an HTML table

Currently, I am in the process of developing an ASP.NET Web Api 2.2 application using .NET Framework 4.5, C#, and jQuery. Within one of my views, I have set up the following table: <table id ="batchTable" class="order-list"> <thead> ...

javascriptjqueryhtmlasp.netrazor

Dividing one SVG into Multiple SVGs

I'm facing a challenge with loading an SVG overlay on a Google Map. The SVG file is quite large, about 50mb, resulting in a delay of around 10 seconds for it to load in the browser. One solution I'm considering is splitting the SVG into 171 smal ...

javascripthtmlcssgoogle-mapssvg

Utilizing Npm modules with a jQuery plugin

As a newcomer to Npm packages (coming from Ruby), I am attempting to load a jQuery plugin that is not available on NPM. My task involves building a Chrome extension. The code snippet below is utilized in the content.js script that is injected into the brow ...

javascriptjquerynode.js

Free up memory in Three.js

Utilizing the shape extrusion tool within the system, I have been extruding shapes along a spline. However, I've encountered a problem where my RAM quickly becomes full every time I move the spline nodes, as I create a new mesh each time this action i ...

javascriptwebglthree.js

Tips for linking real-time information to an array using AngularJS

Exploring Angular for the first time, I've embarked on creating a shopping cart web application. I came across a cart plugin online at https://www.codeproject.com/Articles/576246/A-Shopping-Cart-Application-Built-with-AngularJS, but it only supports s ...

javascriptphpangularjsajax

Adding a div after a specific child in a bootstrap grid

I've been searching tirelessly, but I just can't seem to crack this puzzle... In my Bootstrap grid, I'm faced with the challenge of injecting a div upon click after the row where the clicked div is located. For instance, I have a series of 5 ...

javascriptjqueryhtmlbootstrap-4bootstrap-grid

The fetch method is not utilized with ES6 fetch within React

I'm currently facing an issue with fetch functions in my first react js app. Here is the project structure: hello-world -- app -- components -- main.jsx -- node_modules -- public -- build.js -- index.html -- package.jso ...

node.jsreactjsecmascript-6es6-promise

When using the onclick function, an unexpected behavior occurs where instead of displaying content, the page

Below is a summarized version of my code: HTML <a onclick="showHideDiv('bio')" target='_self'> bio <div id="bio" class="shadowScreen" style="display: none;"> <p class="showBio"> Bio! </p> &l ...

javascripthtmlcssonclickrefresh

retrieve the complete webpage content, encompassing the .html file, images, .js files, css stylesheets, and more

I'm currently working on a project and could use some assistance. Is there a method available to download an entire page, including the .html file, images, .js files, css, etc., using PHP, JavaScript, or AJAX? <html> <body> & ...

javascriptphpajax

Guide to setting up Nginx to host Rails application and Angular website on one domain

I am eager to configure Nginx to serve both my Rails application (using passenger) and an Angular front end. Essentially, any requests made to / should be routed to Rails, while requests to /admin/* should be directed to the Angular app. I stumbled upon ...

ruby-on-railsangularjsnginx

Getting attribute values from custom tags in AngularJS is a common task that can be

I am new to AngularJS and I'm having trouble with my code. I am attempting to retrieve the attribute value of post-id from my index.html file and display it in the console from my controller. Here is a snippet from my index.html: <post-creator po ...

javascriptangularjs

The promise is unexpectedly fulfilled ahead of schedule without returning the expected value from an AXIOS call

My current challenge involves making a request to a service that rapidly generates multiple strings. The problem lies in returning a promise from this service, as I lack control over the string-generation process. It is crucial for me to return a promise ...

javascriptnode.jstypescriptpromiseaxios

Azure Chatbot that logs conversations in Webchat whenever the user selects 'none of the above' option

Recently, I've delved into the world of web chat services and embarked on a journey to craft a chat bot using pure JavaScript code that can seamlessly integrate into any HTML file. Despite consulting Microsoft's documentation, I find myself in a ...

javascripthtmlazure

Why did my compilation process fail to include the style files despite compiling all other files successfully?

As English is not my first language, I kindly ask for your understanding with any typing mistakes. I have created a workspace with the image depicted here; Afterwards, I executed "tsc -p ." to compile my files; You can view the generated files here Unf ...

javascriptcssreactjstypescriptless

Updating elements within an array on the fly

In this scenario, let's consider two arrays: array A = [2, 5, 6] and array B = [1, 2, 3, 4, 5, 6, 7, 8]. The values of array B are initially hidden within boxes and become revealed when clicked. The goal is to replace certain values in array B with un ...

javascriptarraysvue.js

Perform a JSON query using JavaScript

Is there a way to query JSON using JavaScript? In my JavaScript code, I have a JSON stored in a variable called 'json'. This JSON is an array of data, each containing 3 attributes: 'name', 'city', and 'age'. I am in ...

javascriptjqueryarraysangularjsjson