Angular2 v3 구성 요소 라우터 : TypeError : 정의되지 않은 'split'속성을 읽을 수 없습니다.

Question

최근에 내 angular2 앱을 RC 라우터에서 v3 라우터로 전환했습니다. 이것은 내 라우터의 구성 설정이

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 

입니다 : 내가 디버그 출력을 얻기 위해 라우터에서 추적을 활성화 한 후 오류

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

받고 있어요, 그것은 오류의 원인처럼 보이는 것은 라우터에서입니다 :

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

라우팅 상단 두 가지 수준 (응용 프로그램 경로 및 MyAppRoutes)에서 잘 작동

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

WorkspaceRoutes. 그러나 위의 오류로 인해 /my/workspace/1234/projects과 같은 경로로 이동하려는 경우 실패합니다. 이 같은 설정은 Angular2 베타 및 v2 라우터에서 수행되었습니다.

Answer 1

무슨 일인지 알아 냈습니다. 다른 사람이 비슷한 문제를 겪을 경우,이 경우 문제는 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의 어린이 항목이 해당 항목 아래 아니었지만, 같은 레벨에 있어야합니다.