如何在這個 angular 2 示例上使用 HTML5 模式？

Question

我正在使用 chsakell 的這個例子來玩 angular 2。

我嘗試做的第一件事是將“散列”網址替換為真實網址（例如http://localhost:9823/#/photos by http://localhost:9823/photos ）

根據這個鏈接，我必須使用PathLocationStrategy ，這是默認的路由策略。

為了做到這一點，我改變了這個

bootstrap(AppRoot, [HTTP_PROVIDERS, ROUTER_PROVIDERS,
    provide(RequestOptions, { useClass: AppBaseRequestOptions }),
    provide(LocationStrategy, { useClass: HashLocationStrategy }),
    DataService, MembershipService, UtilityService])
    .catch(err => console.error(err));

經過

bootstrap(AppRoot, [HTTP_PROVIDERS, ROUTER_PROVIDERS,
    provide(RequestOptions, { useClass: AppBaseRequestOptions }),
    provide(APP_BASE_HREF, { useValue: '/' }),
    DataService, MembershipService, UtilityService])
    .catch(err => console.error(err));

但是哈希仍然出現。 如何擺脫 Angular 2 的 url 上的哈希值？

Answer 1

清除瀏覽器緩存或強制重新加載ctrl + F5 。

Answer 2

供參考，

...
import {Component,bind} from 'angular2/core';
import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';


bootstrap(AppRoot, [HTTP_PROVIDERS, ROUTER_PROVIDERS,
          provide(RequestOptions, { useClass: AppBaseRequestOptions }),
          bind(APP_BASE_HREF).toValue(location.pathname),
          DataService, MembershipService, UtilityService])
            .catch(err => console.error(err));