How to force Angular to reload components when navigating to same url

Tested in Angular 11:

In module config for route module:

imports: [RouterModule.forRoot(routes, {
onSameUrlNavigation: 'reload',
exports: [RouterModule],

Set onSameUrlNavigation to ‘reload’

Whan using router.navigate() force url to update by adding a unique query parameter:

let navigationExtras: NavigationExtras = {
  queryParams: {
     refreshToken: (new Date).getTime(); //pass a dummy parameter (i.e. the time in milliseconds since 1970 or use the npm uuid library), forces reload of unique url
this.router.navigate(['/detail'], navigationExtras);

More info:

Leave a Reply

Your email address will not be published. Required fields are marked *