NGXS router plugin breaks routing

Question

@ngxs/storage-plugin used with @ngxs/router-plugin causes routes to break. If I remove either of them routing works fine. With both of them, if I type a URL in the browser it always returns to the last route. I've tried changing the order that these plugins are loaded (moving storage-plugin to last), the behavior is the same.

I have the following routes in my app.routes.ts module.

export const routes: Route[] = [
{
  path: 'login',
  children: AUTH_ROUTES
},
{
  path: 'account-verification',
  loadChildren: 'app/account-verification/account-verification.module#AccountVerificationModule'
},
{
  path: 'profile',
  loadChildren: 'app/profile/profile.module#ProfileModule'
},
{
  path: '',
  component: LayoutComponent,
  children: [
    { path: '', loadChildren: 'app/user-dashboard/user-dashboard.module#UserDashboardModule' },
    { path: 'calendar', loadChildren: 'app/calendar/calendar.module#CalendarModule' },
    // { path: 'messages', loadChildren: 'app/messaging/messaging.module#MessagingModule' },
  ],
  canActivate: [ guards.AuthGuard, guards.AccountVerificationGuard ]
}
];

I can navigate from /profile/create (a child route in ProfileModule) to login with no problems.

Clicking on buttons to go to a route using [routerLink] still works, but if I'm on /profile/create and I type in /login in the browser, I am immediately brought back to /profile/create. Here are my imports in app.module.ts:

imports: [
BrowserModule,
AuthModule,
CoreModule,
HttpClientModule,
LayoutModule,
AngularFontAwesomeModule,
RouterModule.forRoot(routes, { enableTracing: true }),
NgxsModule.forRoot([]),
NgxsReduxDevtoolsPluginModule.forRoot(),
NgxsStoragePluginModule.forRoot(),
NgxsRouterPluginModule.forRoot(),
ToastrModule.forRoot({
  timeOut: 10000,
  positionClass: 'toast-top-right',
  preventDuplicates: true,
}),
ToastContainerModule,
BrowserAnimationsModule,
FileUploadModule
],

package.json

"dependencies": {
  "@angular/animations": "6.0.4",
  "@angular/cdk": "6.2.1",
  "@angular/common": "6.0.4",
  "@angular/compiler": "6.0.4",
  "@angular/core": "6.0.4",
  "@angular/forms": "6.0.4",
  "@angular/http": "6.0.4",
  "@angular/material": "6.2.1",
  "@angular/platform-browser": "6.0.4",
  "@angular/platform-browser-dynamic": "6.0.4",
  "@angular/router": "6.0.4",
  "@ngxs/router-plugin": "3.1.3",
  "@ngxs/storage-plugin": "3.1.3",
  "@ngxs/store": "3.1.3",

Answer 1

What i got on NXGXS community and NGXS docs. This is bug in NGXS but there is a temporary solution by mention nodes in Storage plugin module as options key.

Like @Ryan mentioned in comment.

NgxsStoragePluginModule.forRoot({ key: ['auth'] })

But in above solution you will need to mention all the nodes you want to serialize.

In dev channel it is fixed, you can update package to @ngxs/store@dev and that would be fixed. Updating the package to dev solved my problem.

Here you can see change log. Change log for NGXS