What is the use of onSameUrlNavigation property in Angular( versions greater than 5)

Question

Recently I have heard about a property called onSameUrlNavigation where you can set it to "reload". I have googled about it but there are not many articles which shows the use of that property. Can somebody help me with a real time example of where exactly we need to use that property.

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
 exports: [RouterModule],
 })

Answer 1

onSameUrlNavigation configures how the router handles navigation to the current URL. By default, the router will ignore this navigation. However, this prevents features such as a "refresh" button. Use this option to configure the behavior when navigating to the current URL. Default is 'ignore'.by setting it to ‘reload’ you can navigate the current rout and trigger the router events again by setting it to 'ignore' if you navigate to same page it won't change the rout, see this example:

imports: [ BrowserModule, FormsModule, RouterModule.forRoot(routes, {
    // onSameUrlNavigation: 'ignore',
    onSameUrlNavigation: 'reload'
  }) ],

Answer 2

For me, adding onSameUrlNavigation made absolutely no different to my Angular routing at all.

When trying to navigate from, say, /users:123 to /users:234, that option wouldn't allow me to refresh the page. My Angular pages have complex grids on them, and I specifically needed them to be disposed, and recreated, when I swap to a different user.

What did work (kill me now...) was to add this to my code.

let newRouterLink = '/users:123';
this.router.navigate(['/']).then(() => { this.router.navigate([newRouterLink ]); })

It's ugly, but it does the job....

Answer 3

I followed Joe Newton's hint and ended up with:

1. Add { onSameUrlNavigation: 'reload' } to @NgModule (most likely in app.module.ts) like this:

@NgModule({ imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })] })

2. In front of your this.router.navigate([PathName]) insert:

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

Tested on Angular 11.

Answer 4

RouteReuseStrategy. In order to reload routed components on same url navigation, you need to set onSameUrlNavigation to 'reload' and provide a **RouteReuseStrategy which returns false** for shouldReuseRoute.

https://angular.io/api/router/Router