오류 : 모든 경로를 일치시킬 수 없음 : Angular 2 RC5 in Angular CLI

Question

저는 Angular 2 RC5로 간단한 응용 프로그램을 개발했습니다. 검색 페이지를 렌더링하고 레코드를 클릭하여 편집 할 수 있습니다. 간단한 물건. 나는 master 브랜치의 Angular CLI 최신 버전을 사용하여 앱을 생성했다. 이 버전은 라우팅을 지원하지 않으므로 router guide을 사용하여 내 버전을 만들어야했습니다.

초기 페이지가로드 될 때 콘솔에 다음 오류가 표시됩니다. 다음과 같이 다음 app.module.ts에 언급 된 것

import { Routes, RouterModule } from '@angular/router'; 
import { SearchComponent } from "./search/index"; 
import { EditComponent } from "./edit/index"; 
import { AppComponent } from "./app.component"; 

const appRoutes: Routes = [ 
    { path: 'search', component: SearchComponent }, 
    { path: 'edit/:id', component: EditComponent } 
]; 

export const appRoutingProviders: any[] = []; 

export const routing = RouterModule.forRoot(appRoutes); 

:

Error: Cannot match any routes: ''' 

여기처럼 내 app.routes.ts 파일이 어떻게 표시되는지를 보여줍니다

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms' 
import { HttpModule } from '@angular/http' 
import { routing, appRoutingProviders } from './app.routing'; 

import { AppComponent } from './app.component'; 
import { SearchComponent } from './search/search.component'; 
import { EditComponent } from './edit/edit.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    SearchComponent, 
    EditComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing 
    ], 
    providers: [appRoutingProviders], 
    entryComponents: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

내가 app.routing.ts에 '의 경로'를 추가했는데,이 내 페이지에서 AppComponent을 두 번 렌더링합니다.

0

const appRoutes: Routes = [ 
    { path: 'search', component: SearchComponent }, 
    { path: 'edit/:id', component: EditComponent }, 
    { path: '', component: AppComponent } 
]; 

은, HTML은 AppComponent를로드 할 수있다 :

<app-root>Loading...</app-root> 

그리고 app.component.html에서

, 나는 페이지를로드하는 라우터 콘센트가 있습니다.

<!-- Routed views go here --> 
<router-outlet></router-outlet> 

Answer 1

이 같이 당신의 경로를 정의합니다 https://angular.io/docs/ts/latest/guide/router.html

여러 코드 조각 및 plunkers 있습니다

const appRoutes: Routes = [ 
    { path: 'search', component: SearchComponent }, 
    { path: 'edit/:id', component: EditComponent }, 
    { path: '', redirectTo: '/search', pathMatch: 'full' } 
]; 

은 공식 문서를 참조하십시오.

Answer 2

노란색 영역을 app.module.ts에 입력하십시오. 저의 작품입니다! 나는 그것이 일하기를 바란다!

Answer 3

경로 :

const routes: Routes = [ 
    { path: '', component: HeaderComponent }, 
    { path: 'dashboard', component: DashboardComponent }, 
    { path: 'detail/:id', component: HeroDetailComponent }, 
    { path: 'heroes',  component: HeroesComponent } 
]; 

응용 프로그램 구성 요소 만이 있어야이 :

<router-outlet></router-outlet>