Platform: @ngrx/router-store selectRouteData returns always empty

Created on 21 Aug 2020 · 10Comments · Source: ngrx/platform

Minimal reproduction of the bug/regression with instructions:

Reproduced: https://stackblitz.com/edit/ngrx-seed-s6jcdy?file=src%2Fapp%2Ftest.component.ts

I've followed all the steps from the https://ngrx.io/guide/router-store, but selectRouteData doesn't return data from routes resolvers. Am I missing something that is not documented?

  constructor(
    private route: ActivatedRoute,
    private store: Store<AppState>
  ) {}

  readonly center$ = this.store.select(selectRouteData).pipe(
    tap(data => {
      console.log('selectRouteData', data, this.route.snapshot);
    }),
  );

But data exists in the ActivatedRoute snapshot.

Screen Shot 2020-08-21 at 12 03 30

Expected behavior:

selectRouteData should return data from activated route.

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

Latest versions.

Router Store

Source

greg-md

Most helpful comment

So the problem are resolvers.

const routes: Routes = [
  {
    path: '',
    component: TestComponent,
    // 👇 this doesn't get "selected" with `selectRouteData`
    resolve: {
      test: TestResolver,
    },
    // 👇 this gets "selected"  with `selectRouteData`
    data: {
      id: 1
    }
  },
];

timdeschryver on 24 Aug 2020

👍2

All 10 comments

Do you got a reproduction for this @greg-md ?

timdeschryver on 23 Aug 2020

@timdeschryver is there an active template for ngrx version 10 in stackblitz? I couldn't find one. Basically I did everything from the docs.

Installed StoreRouterConnectingModule is app module;

StoreModule.forRoot(appReducers),
StoreRouterConnectingModule.forRoot(),

Added routerReducer in the app reducers.

import { ActionReducerMap } from '@ngrx/store';
import { routerReducer, RouterReducerState } from '@ngrx/router-store';

export type AppState = {
  router: RouterReducerState<any>;
};

export const appReducers: ActionReducerMap<AppState> = {
  router: routerReducer,
};

Exported router selectors:

export const selectRouter = createFeatureSelector<AppState, RouterReducerState>('router');

export const {
  selectRouteData,      // select the current route data
} = getSelectors(selectRouter);

Then tried to select route data:

readonly data$ = this.store.select(selectRouteData);

And it's always empty, but I have resolvers inside the current router and I could get data from activated route snapshot.

greg-md on 24 Aug 2020

@greg-md there is this one, https://stackblitz.com/edit/ngrx-seed?file=src/app/app.component.ts.
It's a basic template, with only one rout but the set up is done for all the packages.

timdeschryver on 24 Aug 2020

@timdeschryver Thanks! Here it is: https://stackblitz.com/edit/ngrx-seed-s6jcdy?file=src%2Fapp%2Ftest.component.ts

greg-md on 24 Aug 2020

👍1

So the problem are resolvers.

const routes: Routes = [
  {
    path: '',
    component: TestComponent,
    // 👇 this doesn't get "selected" with `selectRouteData`
    resolve: {
      test: TestResolver,
    },
    // 👇 this gets "selected"  with `selectRouteData`
    data: {
      id: 1
    }
  },
];

timdeschryver on 24 Aug 2020

👍2

@timdeschryver right. I think they should be included as well in selectRouteData

greg-md on 24 Aug 2020

I'm not very familiar with it, but it seems that Angular doesn't expose the data from the resolved in the router events. So if Angular doesn't expose it, I don't know if we can...