Почему маршрутизация не работает?

Question

Я пытаюсь сделать мастер новой маршрутизации в angular2

мои app.ts

import {Component,ViewEncapsulation} from 'angular2/core'; 
import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router'; 
import {WizardCmp} from './wizard'; 
@Component({ 
    selector: 'my-app', 
    providers: [], 
    encapsulation: ViewEncapsulation.None, 
    template: ` 
    <p>header</p> 
    <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
    }) 
    @RouteConfig([ 
    { path: '/...', component:WizardCmp, as: 'Home',useAsDefault:true}, 
     ]) 
     export class App {} 

У меня есть только один маршрут здесь с тремя точками нотации.

wizard.ts

import {Component, View} from 'angular2/core'; 
import {Router,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router'; 
import {FirstFormCmp} from './form1'; 
import {SecondFormCmp} from './form2'; 
import {ThirdFormCmp} from './form3'; 
@Component({ 
    selector: 'wizard' 
     }) 
@View({ 

    template: ` 
    <h1>wizard</h1> 
    <router-outlet></router-outlet> 
     `, 
    directives: [...ROUTER_DIRECTIVES] 
    }) 
    @RouteConfig([ 
    {path: 'first', name: 'FirstForm', component: FirstFormCmp, useAsDefault: true}, 
    {path: 'second', name: 'SecondForm', component: SecondFormCmp}, 
    {path: 'third', name: 'ThirdForm', component: ThirdFormCmp}, 


export class WizardCmp {} 

но ничего не показывает. И никаких ошибок в консоли. Это Plunker

Answer 1

Он работает с небольшими модификациями http://plnkr.co/edit/bppL6TZDbRBD3mVIjw3f?p=preview ...

С plunker вы должны использовать HashLocationStrategy. Может быть, потому что приложение работает в , не знаю точно, почему. Но это не проблема Angular2 или Router, а ограничение плункера.

Я просто добавил HashLocationStrategy в загрузчике:

bootstrap(App, [ 
    ROUTER_PROVIDERS, 
    provide(APP_BASE_HREF, {useValue : '/'}), 
    provide(LocationStrategy, {useClass: HashLocationStrategy}) 
]) 

ссылки на шаблон:

<a [routerLink]="['/Wizard', 'FirstForm']">first</a> 
<a [routerLink]="['/Wizard', 'SecondForm']">second</a> 
<a [routerLink]="['/Wizard', 'ThirdForm']">third</a> 

остальная часть кода не изменилась, и она работает ...