Explore Angular Router's runGuardsAndResolvers
Tags: angular, router, guards, resolvers
Published: 2019-09-28 07:23:56

---
title: Explore Angular Router's  runGuardsAndResolvers
canonical_url: 'https://juristr.com/blog/2019/01/Explore-Angular-Routers-runGuardsAndResolvers'
published: true
description: runGuardsAndResolvers allows you to take control over when the router executes your guards and resolvers.
cover_image: 'https://juristr.com/blog/assets/imgs/run-guards-resolver-post.png'
tags:
  - Angular
  - router
  - guards
  - resolvers
---


  Learn how we can use new options introduced for the `runGuardsAndResolvers` setting for the Angular Router configuration to get a better control over when to run our resolvers and guards.


<!--more-->



I'm pretty sure you know about Router guards and resolvers and what they are good for. If not, don't worry. I have a [full course out on Egghead.io](https://egghead.io/courses/learn-angular-router-for-real-world-applications) :wink:.  

The `runGuardsAndResolvers` options ([here's the official doc](https://angular.io/api/router/RunGuardsAndResolvers)) is actually quite a hidden functionality and not that much used. However, it has been there already since about Angular v4. The possibilities at that time were quite limited though, something like the following:

```typescript
// packages/router/src/router.ts (Angular v4)
private shouldRunGuardsAndResolvers(
    curr: ActivatedRouteSnapshot, future: ActivatedRouteSnapshot,
    mode: RunGuardsAndResolvers): boolean {
  switch (mode) {
    case 'always':
      return true;

    case 'paramsOrQueryParamsChange':
      return !equalParamsAndUrlSegments(curr, future) ||
          !shallowEqual(curr.queryParams, future.queryParams);

    case 'paramsChange':
    default:
      return !equalParamsAndUrlSegments(curr, future);
  }
}
```

Basically there were three options, `always`, `paramsOrQueryParamsChange` and `paramsChange`. Given a route configuration, we can set a property `runGuardsAndResolvers` and set it accordingly to one of those two options.

```typescript

RouterModule.forRoot([
  ...
  {
    path: 'home/:id',
    component: HomeComponent,
    ...
    runGuardsAndResolvers: 'paramsChange'
  }
])

```

By **default** if you don't specify any mode, the router will apply what is called `paramsChange` mode, meaning it will re-run the guards and resolvers whenever the path or path params change. Examples of URLs satisfying this condition and hence execute the guards & resolvers would be the following:

- `/home/1` => `/home/2`
- `/home/1` => `/home/1;param1=38`
- `/home/1;param1=38` => `/home/1;param1=20`

Examples **not** firing a change

- `/home/1` => `/home/1?queryParam=hi`
- ...

On the other side, when setting it to `paramsOrQueryParamsChange` the guards and resolvers fire on most changes to the URL and is just very similar to the `always` option (the only difference being probably URL fragment changes):

- `/home/1` => `/home/2`
- `/home/1` => `/home/1;param1=38`
- `/home/1;param1=38` => `/home/1;param1=20`
- `/home/1` => `/home/1?queryParam=hi`

Basically as the name suggests, it fires whenever the params (i.e. `;param1=..`) changes or a query param (i.e. `?someQuery=..`). One might not guess, but it also changes for al modifications of the path, like in the very first example when moving from `/home/1` to `/home/2`.

## New Modes in Ang...

[Read more &raquo;](https://juristr.com/blog/2019/01/Explore-Angular-Routers-runGuardsAndResolvers?utm_source=devto&utm_medium=crosspost)