canActivate not fire after query params changes

Question

Why does route guard - canActivate , not fire after navigate the same url with different query params:

in app.module:

const appRoutes: Routes = [
  {
    path: '', component: MainPageComponent, canActivate: [MyGuardService], 
     children: [
      { path: 'MyList', component: ListComponent }
    ] .....

RouterModule.forRoot(
      appRoutes,
      {
        onSameUrlNavigation: 'reload'
      } 
    ),

in the ListComponent :

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

when I run http://localhost:4200/MyList?id=24 the canActivate guard (MyGuardService) is fire.

I have a click event in ListComponent that run:

this.router.navigate([`/MyList`], { queryParams: { id: '25'} });

and the page reload fine with the new id, but - the canActivate guard (MyGuardService) doesnt fire again. Why ?? (I'm using angular 5)

Answer 1

you can set the property 'runGuardsAndResolvers' to your route configuration.

These values are allowed:

export declare type RunGuardsAndResolvers = 'paramsChange' | 'paramsOrQueryParamsChange' | 'always';

Like this:

{ path: 'MyList', 
  component: ListComponent, 
  runGuardsAndResolvers: 'paramsOrQueryParamsChange' }