How to reload a page in Angular 8 the proper way

Question

NB. I\'ve got a set of resulting from googling but, as I explain at the end, I sense that they aren\'t reliable, due to diversity.

I have two utility method

Answer 1

on your app-routing-module.ts pls verify you have the {onSameUrlNavigation: 'reload'}

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

Answer 2

You can find total working example here in this StackBlitz Link

Update First of all doing window.location.reload() is totally against of Single-Page-Application nature. rather, You can reload particular component when actually clicking on that link.. so, to do this task we have angular router. For particular component reload you can push this line of code in main app.component.ts once for full application.

mySubscription;

 constructor(private router: Router, private activatedRoute: ActivatedRoute){
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
    this.mySubscription = this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
         // Trick the Router into believing it's last link wasn't previously loaded
         this.router.navigated = false;
      }
    }); 
 }

above code we are going to subscribing to router-events. and then we are checking each and every router-NavigationEnd event, then just telling router, forget to add current navigation of router to its own history. So, each time whenever we are trying to reload same component each and every events are firing for that particular component only, thats a SPA.

IN app.component.ts of ngOnDestroy() we have to unsubscribe from router events, when component is destroyed.

ngOnDestroy(){
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
}

Now, for example you have Home and Details component or anything else of component... You can reload each component by calling this.router.navigate([this.router.url]) this will reload all current component. for example, In home component we have reload-button and click event of that we are just calling this.router.navigate([this.router.url]). same for details component too.. or any other component..

Home.component.ts

reLoad(){
  this.router.navigate([this.router.url])
}

Details.component.ts

reLoad(){
  this.router.navigate([this.router.url])
}

You can check in updated above StackBlitz link, all working example of reloading with full router-state reloading. In browser console see each and every events of component is firing by clicking button reload().

Answer 3

ok this next example works for me without reload the page:

on router component you have tu add 'onSameUrlNavigation' router.component:

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

now component you want reload

constructor(private router: Router){
  this.router.routeReuseStrategy.shouldReuseRoute = () => {
    return false;
  };
}

someFunction(){
  this.router.navigateByUrl('/route');
}

Answer 4

Try the following.

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

,

Answer 5

To Reload the same page...Try This

window.location.reload();

Answer 6

Try the following.

this.ngOnInit();

It works for me with same route reload.