'NGRX router-store: selectCurrentRoute selector undefined

I'm trying to use the selectCurrentRoute selector, but I only get undefined.

export interface AppState {
  router: RouterReducerState<RouterStateUrl>
}

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

export const selectRouterState = createFeatureSelector<RouterReducerState<RouterStateUrl>>('router');
export const { selectCurrentRoute } = getSelectors(selectRouterState);
export const getCurrentRoute = createSelector(selectRouterState, selectCurrentRoute);
------    
this.store
      .select(routerFromSelector.getCurrentRoute)
      .subscribe((route) => console.log(route));

core.module.ts

StoreModule.forRoot(reducers), 
StoreRouterConnectingModule.forRoot({
serializer: CustomSerializer,
}),
      
providers: [{ provide: RouterStateSerializer, useClass: CustomSerializer }],

app-routing.module.ts

imports: [RouterModule.forRoot(routes, {
    paramsInheritanceStrategy: 'always'
})],

my state:

router -> state -> 
url():"/person/1"
params -> id():"1"
queryParams():
navigationId():1


Solution 1:[1]

The default router key that's used in the store is router (https://github.com/ngrx/platform/blob/875adb3a99ba394f58d107c6223578326887c74e/modules/router-store/src/router_store_module.ts#L98).

This means you need to change your state key routerState to router, or you can configure the router key in StoreRouterConnectingModule.forRoot(). (https://ngrx.io/guide/router-store/configuration)

StoreRouterConnectingModule.forRoot({
      stateKey: 'routerState'
})

Solution 2:[2]

If you are using lazy loading, you will need to change the serializer (The default one won't work), so you need to get the parent + child route parameters into the state, check: https://medium.com/simars/ngrx-router-store-reduce-select-route-params-6baff607dd9

After you do so, triple verify the data ended up in the state, you can use the Redux devtools extension to make sure it ended up in the state.

Finally, if all is good, write your own selectors that match how data in the state looks like, so don't use the default getSelectors as it might not work

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 timdeschryver
Solution 2