Angular 7 won't start navigation, no errors are seen. Any tips on what's wrong?

Question

I have an Angular 7 application where I navigate to a link e.g. eligibility/1, it works no problem and the network tab shows the outbound request. After the page renders, attempts to navigate to eligibility/2 (via a link click) won't send outbound request.

The router trace shows this:

This is the Javascript after the router navigate call. Note the promise being returned to temp shows a zone state of Null and Value of Array(0).

Is this a zone issue? Note there are no Console errors either.

Answer 1

Angular, by default will not refresh an already loaded component. But that behavior can be overridden as shown here.

 // Browser is already on /pathName/5102 
 // We see the proper display which means
 // our router paths are correct.
 // And now we attempt to go to a new path.

 let newLocation = `/pathName/5110`;
 // override default re use strategy
 this.router
    .routeReuseStrategy
    .shouldReuseRoute = function () {
        return false;
 };
 this.router
   .navigateByUrl(newLocation)
   .then(
   (worked) => {
     // Works only because we hooked
     // routeReuseStrategy.shouldReuseRoute 
     // and explicitly told it don't reuse
     // route which forces a reload.
     // Otherwise; the url will change but new
     // data will not display!
   },
   (error) => {
    debugger;
    }
 );