Angular2 Router Błąd: Nie można dopasować do dowolnego trasy: ''

Question

mam skonfigurowane Angular2 Router jak poniżej:

import { provideRouter, RouterConfig } from '@angular/router'; 
import { Page2} from './page2'; 

const routes: RouterConfig = [ 
    { path: 'page2', component: Page2 } 
]; 

export const appRouterProviders = [ 
    provideRouter(routes) 
]; 

Plnkr dostępne here

na prowadzeniu kod pojawia się błąd:

Error: Cannot match any routes: '' 

Czego mi tu brakuje?

Answer 1

Należy określić domyślny router '' jak:

const routes: RouterConfig = [ 
    { path: '', component: Home }, 
    { path: 'page2', component: Page2 } 
]; 

lub za pomocą przekierowania:

const routes: RouterConfig = [ 
    { path: '', redirectTo: '/page2', pathMatch: 'full' }, 
    { path: 'page2', component: Page2 } 
]; 

Zobacz także przykład z angular2 dokumentacji

• https://angular.io/docs/ts/latest/guide/router.html#!#redirect

Answer 2

musisz określić trasy dla przypadku, gdy użytkownik jest na stronie indeksu aplikacji, że trasa jest ścieżka „” i powinno to wyglądać tak: { path: '', component: MyComponent }

Jeśli chcesz swoją stronę domyślną być Strona2 trzeba powiedzieć ścieżkę indeksu przekierować do niego tak:

{ path: 'page2', component: Page2 }, 
{ path: '', redirectTo: '/page2', pathMatch: 'full' } 

kolejność tutaj jest ważne, najbardziej specyficzny trasa powinna na pierwszym miejscu.

Answer 3

aby być moim zrozumieniem, chcesz użyć jako domyślnej strony strony app.ts i wczytać stronę2 przez kliknięcie Page2?

Opcja 1:szybko rozwiązać problem

Rozwiązując aktualny błąd konsoli można dodać do app.route.ts

import { App} from './app'; 

const routes: RouterConfig = [ 
    { path: '', component: App, useAsDefault: true } 
    { path: 'page2', component: Page2 } 
]; 

oraz wynik będzie

Ale zobaczysz, że plik app.ts html zostanie załadowany dwa razy! co nie jest dobrym rozwiązaniem!

Opcja 2:

Ponieważ używam w moim projekcie, to zaleca się stworzenie nowej strony głównej zrobić jako startową .Następnie nazywamy STR.2 w app.ts

Oto Plnkr http://plnkr.co/edit/vzl9lw

Czy spełni twoje wymagania!