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

Reloading Same Component by routerLink to Same Route in Angular

I would like to merge some of the information from some answers here into a single answer.

You can achieve reloading the same component from the same route by:

1. Changing configuration in app-routing.module.ts
2. Providing a RouteReuseStrategy (which returns false) in the component defining routerLink(s)

Example:

1. app-routing.module.ts

//...
@NgModule({
  // See https://angular.io/api/router/Router#properties
  imports: [RouterModule.forRoot(routes, {
        // onSameUrlNavigation: 'ignore',  // default behavior
        onSameUrlNavigation: 'reload'
  })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

2. links.component.ts (arbitrary name, yours will be different)

export class LinksComponent implements OnInit {
// ...
  constructor(
    // ...
    private router: Router) { }

  ngOnInit(): void {
    //  ...
    // With the below line you can now reload the same component from the same route
    this.router.routeReuseStrategy.shouldReuseRoute = () => { return false; };
  }
}

---

Supporting Docs

How to handle a navigation request to the current URL. One of:

• 'ignore' : The router ignores the request.
• 'reload' : The router reloads the URL. Use to implement a "refresh" feature.

Note that this only configures whether the Route reprocesses the URL and triggers related action and events like redirects, guards, and resolvers. By default, the router re-uses a component instance when it re-navigates to the same component type without visiting a different component first. This behavior is configured by the 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.

Considerations:

• In our usage we only used static URLs; we haven't tested with dynamic URLs in our approach.
• This example was tested using Angular 12.

Answer 5

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