Angular2 v3组件路由器:TypeError: Cannot read property 'split&

Angular2 v3 component router: TypeError: Cannot read property 'split' of undefined

本文关键字：property split read Cannot v3 组件 路由器 TypeError Angular2      更新时间：2023-09-26

我最近把我的angular2应用程序从RC路由器切换到v3路由器。我得到错误

TypeError: Cannot read property 'split' of undefined
    at match`.

在路由器上启用跟踪以获得调试输出后，看起来错误的来源来自路由器:

NavigationError {id: 2, url: "/my/workspace/1252407935628215305/projects", error: TypeError: Cannot read property 'split' of undefined
    at match - common_router_providers.js:28 NavigationError {id: 2, url: "/my/workspace/1252407935628215305/projects", error: TypeError: Cannot read property 'split' of undefined
    at match (http://localhost:8080/vendor.6a9d…}error: TypeError: Cannot read property 'split' of undefined
    at match (http://localhost:8080/vendor.6a9dd9122cbbc98aa93a.js:74100:22)
    at matchPathsWithParamsAgainstRoute (http://localhost:8080/vendor.6a9dd9122cbbc98aa93a.js:74073:19)
    at expandPathsWithParamsAgainstRoute (http://localhost:8080/vendor.6a9dd9122cbbc98aa93a.js:74038:17)
    at expandPathsWithParams (http://localhost:8080/vendor.6a9dd9122cbbc98aa93a.js:74020:21)
    at matchPathsWithParamsAgainstRoute (http://localhost:8080/vendor.6a9dd9122cbbc98aa93a.js:74085:23)
    at expandPathsWithParamsAgainstRoute (http://localhost:8080/vendor.6a9dd9122cbbc98aa93a.js:74038:17)
    at expandPathsWithParams (http://localhost:8080/vendor.6a9dd9122cbbc98aa93a.js:74020:21)
    at expandSegment (http://localhost:8080/vendor.6a9dd9122cbbc98aa93a.js:74010:17)
    at http://localhost:8080/vendor.6a9dd9122cbbc98aa93a.js:74014:84
    at http://localhost:8080/vendor.6a9dd9122cbbc98aa93a.js:74367:41message: "Cannot read property 'split' of undefined"stack: (...)get stack: stack()set stack: stack()__proto__: Errorid: 2url: "/my/workspace/1252407935628215305/projects"__proto__: Object

这是我的路由器配置设置:

export const routes: RouterConfig = [
  ...MyAppRoutes,
  { path: 'login',  component: LoginComponent}, 
  { path: 'signup', component: SignUpComponent},
  { path: 'join', component: JoinComponent},
  { path: 'version', component: VersionComponent},
  { path: '', redirectTo: 'login', terminal: true},
];
export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes, {enableTracing: true})
];

MyAppRoutes: 

export const MyAppRoutes: RouterConfig = [
  { path: 'my',
    component: MyAppComponent,
    children: [
      {path: 'dashboard', component: DashboardComponent},
      {path: 'profile', component: EditProfileComponent},
      {path: 'password', component: ChangePasswordComponent},
      {path: '', redirectTo: 'dashboard', terminal: true},
      ...WorkspaceRoutes,
    ]
  },
];

WorkspaceRoutes 

export const WorkspaceRoutes: RouterConfig = [
  {path: 'workspace/:id', component: WorkspaceRootComponent},
  {children: [
    {path: 'projects', component: WorkspaceDashboardComponent},
    {path: 'newproject', component: ProjectNewComponent},
    {path: '', redirectTo: 'projects', terminal: true},
  ]}
];

路由在前两层(应用路由和MyAppRoutes)运行良好。但是，尝试导航到任何路线，如/my/workspace/1234/projects，都会失败，并出现上述错误。同样的设置也适用于Angular2 beta和v2路由器。

我明白是怎么回事了。如果其他人遇到类似的问题，在这种情况下的问题是在WorkspaceRoutes。

export const WorkspaceRoutes: RouterConfig = [
  {path: 'workspace/:id', component: WorkspaceRootComponent},
  {children: [    // this should not be the start of a new object
    {path: 'projects', component: WorkspaceDashboardComponent},
    {path: 'newproject', component: ProjectNewComponent},
    {path: '', redirectTo: 'projects', terminal: true},
  ]}
];
应该

export const WorkspaceRoutes: RouterConfig = [
  {path: 'workspace/:id', 
  component: WorkspaceRootComponent,
  children: [
    {path: 'projects', component: WorkspaceDashboardComponent},
    {path: 'newproject', component: ProjectNewComponent},
    {path: '', redirectTo: 'projects', terminal: true},
  ]}
];

WorkspaceRootComponent的子项不在该项之下，而是在同一层上。

相关文章：