Navigating to the current route in Angular 2?

Question

I am trying to reload the current page in Angular.

So when I reload the page, my root component is called and this line is executed:

console.log(this.router.routerState.snapshot.url)

which prints "/component-x"

and then I execute this line of code:

this.router.navigate(['/component-x]')

And it does not work and I am logged out of my application.

Is navigating to the current route in Angular supported? And how else can I achieve reloading the current page?

Note my application is being hosted on Cloudfront on AWS, and I have rule set up that returns index.html when there is 404 error (i.e. when a page refresh occurs), and I have followed this guide around reloading the current route in Angular: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

But it is still not working. Can somebody please point out what I am missing?

Thanks!

[Here are some solutions to reload the current route:](https://stackoverflow.com/questions/40983055/how-to-reload-the-current-route-with-the-angular-2-router) — ferhado, Sep 25 '18 at 23:12

score 4 · Accepted Answer · edited Sep 26 '18 at 00:32

You can use the onSameUrlNavigation from Angular router:

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

And then use the runGuardsAndResolvers on your route and set it to always:

export const routes: Routes = [
 {
   path: 'my-path',
   component: MyComponent,
   children: [
     {
       path: '',
       loadChildren: './pages/my-path/mycomponent.module#MyComponentModule',
     },
   ],
   canActivate: [AuthenticationGuard],
   runGuardsAndResolvers: 'always',
 }
]

With these two changes your router is configured. Now you need to hook into NavigationEnd in your component:

export class MyComponent implements OnInit, OnDestroy{
 // ... your class variables here
 navigationSubscription;
 constructor(
   // … your declarations here
   private router: Router,
  ) {
   // subscribe to the router events - storing the subscription so
   // we can unsubscribe later. 
   this.navigationSubscription = this.router.events.subscribe((e: any) => {
     // If it is a NavigationEnd event re-initalise the component
     if (e instanceof NavigationEnd) {
       this.initialiseMyComponent();
     }
   });
 }

 initialiseMyComponent() {
   // Set default values and re-fetch any data you need.
 }
 ngOnDestroy() {
    // avoid memory leaks here by cleaning up after ourselves. If we  
    // don't then we will continue to run our initialiseInvites()   
    // method on every navigationEnd event.
    if (this.navigationSubscription) {  
       this.navigationSubscription.unsubscribe();
    }
  }
}

And there you go, you have reload ability now. Hope this helps. Unfortunately docs are not very clear on these.

interesting answer. By the way, I just removed the "Snippet" markdown, because Angular is not executable as a snippet in Stack Overflow. To create an executable example, you can consider copying your code in a [Stackblitz](https://stackblitz.com/) — Pac0, Sep 26 '18 at 00:33

Navigating to the current route in Angular 2?

1 Answers1