Angular2アプリのURLを#付きスタイルに変更する

Angular2のデフォルトは http://example.com/top のようなURLスタイルで、これを http://example.com/#/top のような#を挟んだスタイルに変更したい。

デフォルトのスタイルの場合、ブラウザでリロードをかけるとそのようなURLページは存在しないため404になってしまう。

404とならないようにするにはサーバーの設定を変更しないといけない。#スタイルに変更して凌ぐにはprovidersにLocationStrategyで設定します。

@NgModule({
  ...
  providers: [
    ...
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
    ...
  ],
  ...
})

参考

• Appendix: LocationStrategy and browser URL styles