Angular2 Routing 在重新加载页面时给出 404

Question

我已经编写了我的第一个 Angular Dart 应用程序，但是路由有问题......

@Component(
    selector: 'ahpmui',
    template: '''
        <strong>My First Angular 2 App - {{name}}</strong>
        <br />
        <router-outlet>
        </router-outlet>
        <br />
        <nav>
            <a [routerLink]="['HomePage']">Home</a> |
            <a [routerLink]="['DashboardPage']">Dashboard</a>
        </nav>
    ''',
    directives: const [ROUTER_DIRECTIVES],
    providers: const [
        ROUTER_PROVIDERS,
        HomePage,
        DashboardPage
    ]

)
@RouteConfig(const [
    const Route(path: '/dashboard', component: DashboardPage, name: 'DashboardPage', useAsDefault: true),
    const Route(path: '/home', component: HomePage, name: 'HomePage')
])
class AppComponent {

    String name = "Sample App";

}

首页:

@Component(
    selector: 'home-page',
    template: '<strong>This is the Home Page</strong>')
class HomePage {}

仪表板页面:

@Component(
    selector: 'dashboard-page',
    template: '<strong>This is the Dashboard Page</strong>')
class DashboardPage {}

主 Dart :

// bootstrap angular2
    bootstrap(AppComponent, [
        ROUTER_PROVIDERS,
        provide(APP_BASE_HREF, useValue: '/'),
        provide(LocationStrategy, useClass: HashLocationStrategy)
    ]);

当我的应用程序启动时，它按预期转到 http://localhost:8080/dashboard，当单击 Home 链接时，它正确地转到 http://localhost:8080/home。如果我现在刷新页面，我会收到错误 404

然后我将 Bootstrap 部分更改为:

 // bootstrap angular2
    bootstrap(AppComponent, [
        ROUTER_PROVIDERS,
        provide(APP_BASE_HREF, useValue: '/#/'),
        provide(LocationStrategy, useClass: HashLocationStrategy)
    ]);

现在的 URL 如下(我更喜欢这种风格，因为旧版应用程序使用的是相同的 url 格式)

http://localhost:8080/#/dashboard
http://localhost:8080/#/home

如果我点击刷新，不再收到错误 404，但页面会重定向回 http://localhost:8080/#/dashboard 页面。

我正在使用 pub serve 运行应用程序

有什么方法可以将 onHashChange 事件绑定(bind)到 Angular Router 中，这样如果我刷新 http://localhost:8080/#/home实际上路由到 HomeComponent ？

Answer 1

从 AppComponent 中删除 ROUTER_PROVIDERS,，它们已经在 bootstrap() 中了。 ROUTER_PROVIDERS 应该只提供一次。