앵귤러 2 라우터가 정의되지 않음으로 이동합니다

Question

링크를 클릭하고 새 구성 요소가로드 될 때마다 다음 오류가 발생합니다. 111이 잘못에는 HTTP 연결은 거기에 없다 :

구역 선은 반응-height.component.ts처럼 보여줍니다.

이전 버전의 각도에서는 개발 된 환경이 아닌 빌드 된 파일에서만 발생하지만 2.2까지는 dev 모드에서도 발생합니다.

문제가 angular2-router 또는 angular-cli와 관련이 있는지 알 수 없습니다.

현재 angular-cli@1.0.0-β26과 함께 angular 2.3.1을 사용합니다.

아이디어가 있으십니까?

업데이트 : 내 경로가 있으며 중간에 여러 개가 동일한 가운데 삭제되며 foo 표시 줄로 일부 도메인 이름이 변경됩니다.

const routes: Routes = [ 
    { 
    path: '', 
    component: Component1, 
    pathMatch: 'full' 
    }, 
    { 
    path: 'foo/bar', 
    component: Component2 
    }, 
    { 
    path: 'user/profile', 
    component: ProfileComponent 
    }, 
    { 
    path: '404', 
    component: NotFoundComponent 
    }, 
    { 
    path: '**', 
    redirectTo: '404', 
    pathMatch: 'full' 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule], 
    providers: [] 
}) 
export class RoutingModule { 
} 

UPDATE 2 : aplicación가 제대로 작동 , 아니 이상한 행동. 하지만이 오류가 발생하고 그것을 수정하고 싶습니다.

UPDATE 3 : app.module

:

이

{ 
    path: '', 
    component: Component1, 
    pathMatch: 'full' 
    }, 

그렇지 않으면 라우터가 찾고 유지 :

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    ErrorModule, 
    HeaderModule, 
    HttpModule, 
    SharedModule, 
    RoutingModule, 
    UserModule 
    ], 
    providers: [ 
    { 
     provide: LOCALE_ID, 
     useValue: window.navigator.userLanguage || window.navigator.language 
    }, 
    {provide: RequestOptions, useClass: DefaultRequestOptions}, 
    {provide: ConnectionBackend, useClass: XHRBackend}, 
    {provide: Http, useExisting: HttpInterceptor}, 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

Answer 1

children없이 빈 경로 경로에 대한

또는 redirect, 당신은 pathMatch: 'full' 필요 어린이 노선.

Answer 2

당신의 경로를 확인 수입

declarations: [ 
    AppComponent, 
    Component1, 
    Component2 
    ...  
    ] 

의 구성 요소 또는 잘못된 경로에 대한 선언이 없습니다. plunker with your code

app.routes.ts을 제공 :

const routes: Routes = [ 
    { 
    path: '', 
    component: HeaderComponent 
    }, 
    { 
    path: 'shared', 
    component: SharedComponent 
    }, 
    { 
    path: '**', 
    redirectTo: '404' 
    } 
]; 
@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule], 
    providers: [] 
}) 
export class RoutingModule { 
} 

shared.module.ts 오류없이

@NgModule({ 
    imports: [ 
    CommonModule  
    ], 
    declarations: [SharedComponent] 
}) 
export class SharedModule { } 

경로를 header.module.ts하는 비슷한.