loading...
Cover image for Angular's Navigation Challenges

Angular's Navigation Challenges

jwp profile image John Peters ・1 min read

Did you know Jupiter's moons were used for Navigation and Map making starting in the 1600's up to the 1800's? A fascinating story of using Jupiter's moons for Navigation and Map Making

Angular's Default Navigation Behavior

Angular will not reload an already loaded component when navigating to it by default.

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

Angular's Route ReUse Strategy

There have been many questions such as "My page url changes, but the navigation doesn't do anything" This is the effect of Angular's default behavior.

How to Override Angular's Default Behavior

this.router
    .routeReuseStrategy
    .shouldReuseRoute = function () {
        return false;
 };

Just before any navigation is done, this code will allow the page to reload, refresh etc.

But there are alternatives. For the page that doesn't reload, we can create a data injection entry point and call the ChangeDectectorRef detectChanges() function.

JWP2020 Angular Navigation doesn't work

Discussion

pic
Editor guide