Platform: How to set initial state for Router-Store?

[MattiJarvinen]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[X] Documentation issue or request

What is the current behavior?

If used as with https://github.com/ngrx/platform/issues/101#issuecomment-351998548 routerState is serialized and read correctly from TransferState. One problem remains, ROUTER_NAVIGATION actions are not triggered anywhere in the application until ROUTE_ERROR. After ROUTE_ERROR everything seems to work correctly navigationId even uses the correct id number before even that doesn't update when checking with Redux DevTools.

Custom router serializer is run but store doesn't reflect the return value from the serializer.

Expected behavior:

Router-Store can and will use correct initial state. Initial ROUTER_NAVIGATION action doesn't happen, since it's already current in state. Every subsequent navigation will trigger ROUTER_NAVIGATION.

Minimal reproduction of the problem with instructions:

See https://github.com/ngrx/platform/issues/101#issuecomment-351998548 run with server side app. Then navigate afterwards.

Version of affected browser(s),operating system(s), npm, node and ngrx:

Other information:

Angular Universal (server side) issue.

[tplk]

Any ETA on this?
Thanks in advance!

[dummdidumm]

Does this behavior still occur? Maybe #968 fixed it.

[newprogrammer1991]

Any ETA on this?

[alex-okrushko]

@newprogrammer1991 Is this what you are looking for?

import {
  StoreRouterConnectingModule,
  routerReducer,
  RouterStateSerializer,
  RouterReducerState,
} from '@ngrx/router-store';
import { StoreModule } from '@ngrx/store';
import {
  CustomRouterSerializer,
  RouterStateUrl,
} from './custom-router-serializer';
import { ROUTER_FEATURE_KEY } from './selectors';

// Initial state, so it's not undefined in the selectors and router actually navigates to the proper URL
const initialState: RouterReducerState<RouterStateUrl> = {
  state: { url: '/', params: {} },
  navigationId: -1,
};

@NgModule({
  imports: [
    StoreModule.forFeature(ROUTER_FEATURE_KEY, routerReducer, { initialState }),
    StoreRouterConnectingModule.forRoot({
      stateKey: ROUTER_FEATURE_KEY,
    }),
  ],
  providers: [
    { provide: RouterStateSerializer, useClass: CustomRouterSerializer },
  ],
})
export class RoutingModule {}

from: https://github.com/alex-okrushko/ngrx-workshop/blob/b26ddbab032f8165f192353a17964c588ebc771a/src/app/router/routing.module.ts#L28-L31

[newprogrammer1991]

Thank you, but it should work with transferstate( Angular universal and ngrx, I use code from #101)

[newprogrammer1991]

please help with ngrx-router - I have router error with
this.transferState.onSerialize(NGRX_STATE, () => {
let state;
this.store.subscribe( ( saveState: any ) => {
// console.log('Set for browser', JSON.stringify(saveState));
state = saveState;
}).unsubscribe();

        return state;
    });
}

[alex-okrushko]

My understanding is that URL is the actual source of truth for the router-store, meaning that it should use ANY date for it from angular universal (or any other ssr).
Personally, I didn't have a chance to try out Angular Universal, but could you not include router-store's state when passing it to the web app?