NGXS 路由器插件中断路由

Question

@ngxs/storage-plugin 与 @ngxs/router-plugin 一起使用会导致路由中断。如果我删除其中任何一个路由都可以正常工作。对于它们两者，如果我在浏览器中键入 URL，它总是 returns 到最后一条路线。我试过更改这些插件的加载顺序（将 storage-plugin 移到最后），行为是一样的。

我的 app.routes.ts 模块中有以下路线。

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 ]
}
];

我可以毫无问题地从 /profile/create（ProfileModule 中的子路由）导航到 login。

单击按钮转到使用 [routerLink] 的路线仍然有效，但如果我在 /profile/create 上并在浏览器中输入 /login，我会立即被带到回到 /profile/create。这是我在 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

我在 NXGXS 社区和 NGXS 文档上得到了什么。这是 NGXS 中的错误，但通过在存储插件模块中提及节点作为选项键有一个临时解决方案。

就像评论中提到的@Ryan。

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

但在上述解决方案中，您需要提及要序列化的所有节点。

在开发频道中它是固定的，你可以将包更新到 @ngxs/store@dev 并且这将是固定的。将软件包更新为 dev 解决了我的问题。

在这里你可以看到更改日志。 Change log for NGXS

NGXS 路由器插件中断路由

NGXS router plugin breaks routing

angular-routing

angular

ngxs