Ошибка: не может соответствовать любым маршрутам: '' в угловом 2 RC5 с угловым CLI

Question

Я разработал простую программу с угловым 2 RC5. Все, что он делает, отображает страницу поиска и позволяет вам щелкнуть запись, чтобы отредактировать ее. Простые вещи. Я создал приложение, используя последнюю версию Angular CLI из своей главной ветви. Поскольку эта версия не поддерживает маршрутизацию, мне пришлось создать свою собственную, используя router guide.

К сожалению, при загрузке начальной страницы в моей консоли появляется следующая ошибка.

Error: Cannot match any routes: ''' 

Вот что мой app.routes.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); 

Это то ссылка в app.module.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 дважды:

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

В index.html, есть HTML загрузить AppComponent:

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

И в app.component.html, у меня есть маршрутизатор-выход для загрузки страниц.

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

Answer 1

Определите ваши маршруты, как это:

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

Пожалуйста, обратитесь к официальной документации: https://angular.io/docs/ts/latest/guide/router.html

Есть несколько кодовых фрагментов и plunkers.

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

App компонент должен иметь только:

<router-outlet></router-outlet>