Angular – How to force reload components with router navigation

(Tested in Angular 11 project)

One trick is to “double” navigate to force components to destroy and “update” their lifecycle.


/// Navigates to detail view
navigateToDetail(id: string) {

  // Navigates to start page first to "destroy" detail components if on same url
  this.router.navigate(['/']).then(() => {
    // Then navigates to desired url 
    let navigationExtras: NavigationExtras = { queryParams: { 'id': id} };
    this.router.navigate(['/view'], navigationExtras);


I also added this to app-routing.module.ts: (not sure if it makes a difference with the above code)

  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload',
  exports: [RouterModule],
export class AppRoutingModule {}


Leave a Reply

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