Serialize Route Data into state using the CustomRouterStateSerializer

Question

I have the CustomRouterStateSerializer configured and working in my project and I can see the results using the Redux extension for Chrome in the DevTools. I can see the default object written to the state.

router: {
    state: {
      url: '/map/search',
      params: {},
      queryParams: {}
    },
    navigationId: 1
  }

I have added extra information to the routes using the data property.

{ 
    path: 'map', 
    component: MapComponent,
    data: {
      label: "Map"
    },
    children: [
      {
        path: '',
        redirectTo: 'search',
        pathMatch: 'full'
      },
      { 
        path: 'search',
        component: SearchComponent,
        data: {
          label: 'Search',
          icon: 'search'
        }
      }…

Is it possible to alter the CustomRouterStateSerializer to include the data object from the route or just the data.label string? Something like the following....

router: {
    state: {
      label: "Search"
      url: '/map/search',
      params: {},
      queryParams: {}
    },
    navigationId: 1
  }

... or ...

router: {
    state: {
      data: {
        label: "Search",
        icon: "search"
      }
      url: '/map/search',
      params: {},
      queryParams: {}
    },
    navigationId: 1
  }

Thanks

score 1 · Answer 1 · answered Jun 11 '20 at 15:52

Ok I got stuck on the Destructuring assignment syntax used in the CustomRouterStateSerializer.

Here is my solution.

import { Params, RouterStateSnapshot } from '@angular/router';
import { RouterStateSerializer } from '@ngrx/router-store';

export interface RouterStateUrl {
  url: string;
  params: Params;
  queryParams: Params;
  data: any
}

export class CustomRouterStateSerializer implements RouterStateSerializer<RouterStateUrl> {
  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    let route = routerState.root;

    while (route.firstChild) {
      route = route.firstChild;
    }

    const { url, root: { queryParams } } = routerState;
    const { params, data } = route;

    return { url, params, queryParams, data };
  }
}

Maybe this will help someone else in the future.

Serialize Route Data into state using the CustomRouterStateSerializer

1 Answers1