Question

与@ngxs/storage-plugin一起使用的

@ngxs/router-plugin会导致路由中断。如果我删除其中任何一个路由工作正常。对于它们两者，如果我在浏览器中键入URL，它总是返回到最后一个路由。我已经尝试更改加载这些插件的顺序（将存储插件移动到最后），行为是一样的。

我的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路由器插件中断了路由

1 个答案: