Angular Reload Same Route also reloads component

 

Your component

import {Router} from '@angular/router';

export class yourComp {

  constructor( private router: Router){}

 ngOnInit() {

        this.router.routeReuseStrategy.shouldReuseRoute = () => false;

        this.router.onSameUrlNavigation = 'reload'

}

}

load(val) {

if (val == this.router.url) {
  this.spinnerService.show();
  this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
  };
 }
}

Just use the following part in your code.

this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
  };

https://stackoverflow.com/questions/52389376/angular-6-how-to-reload-current-page

A little bit tricky to do something so simple but had no luck trying to reload and recreate the entire parent & child components with current solution.
Angular Router now provides strategy configuration to tell the Router what to do in case you navigate to the same URL as this user suggests in this GitHub issue.
First of all you can configure what to do while setting up the Router (your router module).
@NgModule({
   imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
   exports: [RouterModule]
})
Or, if you are like me and don't want to change the entire router module behaviour you can do it with a method/function like this:
reloadComponent() {
    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
    this._router.onSameUrlNavigation = 'reload';
    this._router.navigate(['/same-route']);
}
Of course you have to first inject Router in your component's constructor:
// import { Router } from '@angular/router';
...
constructor(private _router: Router){}