Угловой 2-х компонентный маршрутизатор

Question

Я схожу с ума, пытаясь настроить простое тестовое приложение на Angular 2. У меня есть 3 страницы / компоненты, которые я хочу загрузить с новым маршрутизатором компонентов. Я получил это на полуработу. В настоящее время у меня есть две проблемы...

1 - Если вы введете путь к компоненту, вы хотите перейти к Ex. " http://127.0.0.1:8080/Test2" вместо загрузки моей страницы Test2, он не может сказать, что не может найти этот маршрут.

2 - При попытке загрузить разные страницы, при первом нажатии на ссылку, она будет правильно загружать страницу. Все другие страницы будут выдавать исключение, когда я нажимаю на ссылку.

Это моя установка:

App.ts

import {Component, bootstrap, provide} from 'angular2/angular2';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, APP_BASE_HREF} from 'angular2/router';

import {Test1} from './Test1';
import {Test2} from './Test2';
import {Test3} from './Test3';

@Component({
    selector: 'my-app',
    template: '<test1></test1><router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES, Test1, Test2]
})

@RouteConfig([
  {path: '/', as: 'Home', component: Test1},
  {path: '/Test2', as: 'Test2', component: Test2},
  {path: '/Test3', as: 'Test3', component: Test3}   
])

class AppComponent {
  constructor() {}
 }

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, { useValue: '/' })]); 

Test1.ts

import {Component, bootstrap} from 'angular2/angular2';
import {RouterLink} from 'angular2/router';

@Component({
    selector: 'test1',
    templateUrl: 'app/Test1.html',
    directives: [RouterLink] 
})
export class Test1 { }

test1.html

<h1> Test 1 </h1>
<a [router-link]="['/Test2']">Test Link 2</a>

Test2.ts

import {Component, bootstrap} from 'angular2/angular2';
import {RouterLink} from 'angular2/router';

@Component({
    selector: 'test2',
    templateUrl: 'app/Test2.html',
    directives: [RouterLink]
})
export class Test2 { }

Test2.html

<h1> Test 2 </h1>
<a [router-link]="['/Test3']">Test Link 3</a>

Test3.ts

import {Component, bootstrap} from 'angular2/angular2';
import {RouterLink} from 'angular2/router';

@Component({
    selector: 'test3',
    templateUrl: 'app/Test3.html',
    directives: [RouterLink]
})
export class Test3 { } 

Test3.html

<h1> Test 3 </h1>
<a [router-link]="['/Test2']">Test Link 2</a>

Спасибо за помощь, ребята!

Предложение Якова о LocationStrategy устранило проблему. Для тех, у кого такая же проблема, полный рабочий код на https://github.com/zorthgo/Angular2QuickstartTest и рабочая версия моего App.ts выглядят так:

import {Component, bootstrap, provide} from 'angular2/angular2';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {Test1} from './Test1';
import {Test2} from './Test2';
import {Test3} from './Test3';

@Component({
    selector: 'my-app',
    template: ` <a [router-link]="['/Home']">Test1 Link</a>
                <a [router-link]="['/Test2', {id: 3}]">Test2 Link</a>
                <a [router-link]="['/Test3']">Test3 Link</a>
                <router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES, Test1, Test2,Test3]
})

@RouteConfig([
  {path: '/',          component: Test1, as: 'Home'},
  {path: '/Test2/:id', component: Test2, as: 'Test2'},
  {path: '/Test3',     component: Test3, as: 'Test3'}

])

class AppComponent {
  constructor() { }
 }

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy })]);

Answer 1

Я сделал что-то подобное, и это работает. Попробуй это:

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);