Custom Router State data with NGXS

I have question about custom router develop with NGXS.

App Module

export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}

@NgModule({
declarations: [
AppComponent,
MyAccountComponent,
HeaderComponent,
LoginComponent,
RegisterComponent,
RegulationsComponent,
FooterComponent,
ContactComponent,
HomeComponent,
RegisterConfirmationPageComponent,
CartComponent
],
imports: [
SharedModule,
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
NgxTranslateRoutesModule.forRoot({
enableRouteTranslate: true
}),
IonicModule.forRoot(),
NgxsModule.forRoot([
RouterState,
AppState,
CartState
], {
developmentMode: !environment.production,
selectorOptions: {injectContainerState: false}
}),
NgxsReduxDevtoolsPluginModule.forRoot(),
NgxsLoggerPluginModule.forRoot(),
NgxsRouterPluginModule.forRoot(),
SwiperModule,
AppRoutingModule,
MyAccountModule
],
providers: [DatabaseService, AuthService, CartGuard, PricesGuard,
{provide: RouterStateSerializer, useClass: CustomRouterStateSerializer}],
bootstrap: [AppComponent]
})
export class AppModule {
}


Custom Router State Serializer

export class CustomRouterStateSerializer implements RouterStateSerializer<RouterStateModel> {
serialize(routerState: RouterStateSnapshot): RouterStateModel {
const {
url,
root: {queryParams}
} = routerState;

let {root: route} = routerState;
while (route.firstChild) {
route = route.firstChild;
}

const {params, data} = route;

if (route.params.title) {
data.title = route.params.title;
}

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


Router State Model

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

@State<RouterStateModel>({
name: 'customRouter',
defaults: {
url: '',
params: null,
queryParams: null,
data: null
}
})
@Injectable()
export class RouterState {

@Selector([RouterState])
static state({state}: RouterStateOuterModel<RouterStateModel>) {
return state;
}

@Selector([RouterState])
static data({state}: RouterStateOuterModel<RouterStateModel>) {
return state.data;
}

@Selector([RouterState])
static params({state}: RouterStateOuterModel<RouterStateModel>) {
return state.params;
}

@Selector([RouterState])
static queryParams({state}: RouterStateOuterModel<RouterStateModel>) {
return state.queryParams;
}

@Selector([RouterState])
static url({state}: RouterStateOuterModel<RouterStateModel>) {
return state.url;
}
}


I prepared everything with documentation text but when I run my application, data doesn't appear in state. Object has initilazed but there is no data - nulls and empty strings. I've tried dispatch custom router state in ngOnInit in app component, but nothing has changed. In documentation is something that I didn't use: NgxsRouterPluginModule.forRoot({ navigationActionTiming: NavigationActionTiming.PostActivation }), problem is that property navigationActionTiming doens't exist in NgxsRouterPluginModule.

How can I trigger custom router data and upadte when anything changed in main Angular's router?

Continue reading...