Is there a way to track and monitor the ngRoute requests that are being made?

Question

Is there a way to track and monitor the ngRoute requests that are being made?

I am in the process of transferring a fairly large Angular 1.6 application from an old build system to Yarn/Webpack.

Our routing is based on ngRoute with a complex promise chain. While sorting out the imports and dependencies, I keep encountering this error:

WARNING: Tried to load angular more than once.

After reading this post on Stack Overflow, it seems that there could be several reasons for this issue. However, fixing the templateUrl paths has helped me resolve some problems with certain pages in the app. This includes both in module definitions and when using ng-include in any template.

The challenge lies in the fact that some component chains are very complex, with conditional ng-includes scattered throughout. It would be extremely helpful if, instead of manually searching through these extensive component trees, I could receive feedback at the end of the promise chain whenever there is a mismatch:

.otherwise({
  redirectTo: '/',
  template: '<public-home></public-home>'
});

I am looking for feedback on attempted routes, along with information about where those attempts originated. This way, I can pinpoint the sources of the incorrect includes.

My main issue is identifying incorrectly resolved route requests and I want to be able to log or record information about the routing process.

This is my current approach to resolving the reloading issue with Angular, but I am open to better solutions if they exist!

javascript angularjs ngroute

Answer 1

Answer №1

For Angular 1 To avoid placing the watch inside a specific controller, you can include the watch for the entire application in Angular app using the run() function.

var myApp = angular.module('myApp', []);

myApp.run(function($rootScope) {
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 
        // handle route changes     
    });
    // or try this
    $rootScope.$on( "$routeChangeStart", function(event, next, current) {
     //..do something
     //event.stopPropagation();  //if you don't want event to bubble up 
    });

});

for angular 2 new router

constructor(router:Router) {
  router.events.subscribe(event:Event => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

old

Inject the Router and subscribe to route change events

import {Router} from 'angular2/router';

class MyComponent {
  constructor(router:Router) {
    router.subscribe(...)
  }
}

NOTE

When using the new router, remember to import NavigationStart from the router module.

import { Router, NavigationStart } from '@angular/router';

If you forget to import it, instanceof will not work and you'll encounter an error stating NavigationStart is not defined.

See also

https://angular.io/docs/ts/latest/api/router/index/Router-class.html
How to detect a route change in Angular 2?

Answer 2

For Angular 1 To avoid placing the watch inside a specific controller, you can include the watch for the entire application in Angular app using the run() function.

var myApp = angular.module('myApp', []);

myApp.run(function($rootScope) {
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 
        // handle route changes     
    });
    // or try this
    $rootScope.$on( "$routeChangeStart", function(event, next, current) {
     //..do something
     //event.stopPropagation();  //if you don't want event to bubble up 
    });

});

for angular 2 new router

constructor(router:Router) {
  router.events.subscribe(event:Event => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

old

Inject the Router and subscribe to route change events

import {Router} from 'angular2/router';

class MyComponent {
  constructor(router:Router) {
    router.subscribe(...)
  }
}

NOTE

When using the new router, remember to import NavigationStart from the router module.

import { Router, NavigationStart } from '@angular/router';

If you forget to import it, instanceof will not work and you'll encounter an error stating NavigationStart is not defined.

Is there a way to track and monitor the ngRoute requests that are being made?

Answer №1

Similar questions

Immediate self-invocation occurs within a JavaScript function

What is the ideal way to iterate a loop in jQuery while using setTimeout?

Utilizing the ref received from the Composition API within the Options API

"Utilizing Javascript in an ERB view file within the Rails framework

Struggling to create a <td> with AngularJS directive

Do not proceed if the process has encountered a failure

What is the best way to apply color to a line-through click event in React without affecting the font color?

Utilizing Angular.js to retrieve data from the server and automatically update at specified intervals

"Exploring the versatility of NextJS with dynamic route parameters

A simple method to obtain the ID of the element that has been clicked and save it in a variable to be utilized in a function responsible for

In JavaScript with Node.js, how can one verify a file's size and only download the initial kilobyte of the file?

Storing a variable in jQuery using AJAX and retrieving it at a later time

When it comes to assigning a background to a div using jQuery and JSON

Discover the simple steps to generating dynamic variables with jQuery!

What is the best way to include data with a file when making an HTTP POST request with AngularJS and ExpressJS?

Unable to adjust metadata titles while utilizing the 'use client' function in Next.js

Getting request parameters within Model in Loopback can be done by accessing the `ctx`

AngularJS File Input element triggering only once when selecting the same file

Achieve filter dominance by implementing an AngularJS filter name override

Wookmark js isn't designed to generate columns from scratch