Fehler: Keine Routen gefunden: '' in Angular 2 RC5 mit Angular CLI

Question

Ich habe eine einfache Anwendung mit Angular 2 RC5 entwickelt. Es wird nur eine Suchseite gerendert und Sie können auf einen Datensatz klicken, um ihn zu bearbeiten. Einfaches Zeug. Ich habe die App mit der neuesten Version von Angular CLI aus der Master-Branche erstellt. Da diese Version kein Routing unterstützt, musste ich meine eigene mit der router guide erstellen.

Leider, wenn die erste Seite geladen wird, sehe ich den folgenden Fehler in meiner Konsole.

Error: Cannot match any routes: ''' 

Hier ist, was meine app.routes.ts Datei wie folgt aussieht:

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); 

Es ist dann in app.module.ts verwiesen wie folgt:

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 { } 

Ich habe versucht, für einen Weg Hinzufügen '' in app.routing.ts, aber das bewirkt, dass meine Seite die AppComponent zweimal rendert:

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

In index.html gibt es HTML die AppComponent zu laden:

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

Und in app.component.html, ich habe einen Router-Ausgang, die Seiten zu laden.

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

Answer 1

Definieren Sie Ihre Routen wie folgt aus:

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

Bitte die offizielle Dokumentation: https://angular.io/docs/ts/latest/guide/router.html

Es gibt mehrere Code-Schnipsel und plunkers.

Answer 2

Hinzufügen gelben Bereich in app.module.ts Seine Arbeit für mich! Ich hoffe, es funktioniert!

Answer 3

Routen:

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

App-Komponente sollte nur haben:

<router-outlet></router-outlet>