Can't reload/refresh active route

Question

I have recently updated to the new RC3 and Router3alpha and it seems some things have changed.

I noticed that a click on the link of an active route does no longer r

Answer 1

This is currently not supported. If only parameter values change but the route stays the same the component is not re-created.

See also https://github.com/angular/angular/issues/9811

You can subscribe to params to get notified when the params change to re-initialize the component instance.

See also https://stackoverflow.com/a/38560010/217408

Answer 2

This is the best hack that I've been able to come up to get around this annoying problem:

    var currentUrl = this.router.url;
    var refreshUrl = currentUrl.indexOf('someRoute') > -1 ? '/someOtherRoute' : '/someRoute';
    this.router.navigateByUrl(refreshUrl).then(() => this.router.navigateByUrl(currentUrl));

This works, but it's still a hack and I hate that the Angular team didn't provide a reload() method

Answer 3

if (currentUrl.indexOf('/settings') > -1) {
    this.router.navigateByUrl('/communication').then(() => this.router.navigateByUrl('/settings'));
} else {
    this.router.navigate(['/settings']);
}

Answer 4

If you really need to trick the Router into reloading the component on each routerLink click, you can use the following code in your Component

constructor(private router: Router){
 // override the route reuse strategy
 this.router.routeReuseStrategy.shouldReuseRoute = function(){
    return false;
 }

 this.router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
       // trick the Router into believing it's last link wasn't previously loaded
       this.router.navigated = false;
       // if you need to scroll back to top, here is the right place
       window.scrollTo(0, 0);
    }
});

}

Hope this helps

Answer 5

I got into the same issue and I solved it using the LocationStrategy in my app module. Here it is how I implemented and will solve all the routing problems.

In app.module.ts

• Add the HashLocationStrategy and LocationStrategy

  import { HashLocationStrategy, LocationStrategy } from '@angular/common';

• Add in NgModule Provider

{
   provide: LocationStrategy,
   useClass: HashLocationStrategy
 }

Final app.module.ts Looks like this

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [
                  {
                     provide: LocationStrategy, 
                     useClass: HashLocationStrategy
                  }
                ],
})

export class AppModule {}

For more information, you can follow these links HashLocationSt

• HashLocationStrategy https://angular.io/api/common/HashLocationStrategy

• LocationStrategy https://angular.io/api/common/LocationStrategy

NOTE: The above strategy will add # in your URL which I don't like. So I used alternative method:

ALTERNATIVE METHOD

Instead of using HashLocationStrategy, you can also use PathLocationStrategy.

Follow the following step which will remove the # and also work as expected in the above method

• import the PathLocationStrategy from @angular/common

import { LocationStrategy, PathLocationStrategy } from '@angular/common';

• Replace HashLocationStrategy to PathLocationStrategy in provider
• Make sure your index.html is having base href as like below.

<base href="/">

Answer 6

In my modest opinion you could use the window.location.reload() in typescript. This way can be easy and secure because is a part of the browser functionalities.