Angular CLI でビルドしたアプリケーションのルーティングがうまくいかない

Question

###前提・実現したいこと
現在、Angular CLI で開発するための準備をしております。
次の手順でビルドしたアプリケーションのルーティングがうまくいかないのですが、どうすればうまくいくのか、あるいは何を確認すればよいのか、ご助言をお願いいたします。

【手順】

① アプリケーションの作成

＞ng new MyApp
＞cd MyApp
＞ng g component page1
＞ng g component page2

② コードの書き換え

[src/app/app.component.html]

<h1>
  {{title}}
</h1>
<router-outlet></router-outlet> <!-- 追加 -->

[src/app/app.module.ts]

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';

import { RouterModule }   from '@angular/router'; //追加

@NgModule({
  declarations: [
    AppComponent,
    Page1Component,
    Page2Component
  ],
  imports: [
    //追加 ここから
    RouterModule.forRoot([
      {
        path: 'page1',
        component: Page1Component
      },
      {
        path: 'page2',
        component: Page2Component
      }
    ]),
    //追加 ここまで
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

③ 確認

＞ng serve

上記のコマンドを実行し、ブラウザから
http://localhost:4200
http://localhost:4200/page1
http://localhost:4200/page2

各URLに接続できることを確認

④ ビルド & サーバー公開

＞ng build
＞cd dist
＞http-server

⑤ 確認
ブラウザから接続すると、

http://localhost:8080

には接続できるのですが、

http://localhost:8080/page1
http://localhost:8080/page2

はエラーが出て接続できません。コンソールには次のように出力されます。

http://localhost:8080/page1 Failed to load resource: the server responded with a status of 404 (Not Found)

どうすれば、無事接続できるようになるのでしょうか。
何卒アドバイスをお願いいたします。

###補足情報(言語/FW/ツール等のバージョンなど)
Angular v2.3.1

Answer 1

おそらく、http-server の設定の問題です。クライアントサイドルーティングをおこなう場合、本来ファイルが存在しないURLにリクエストされたときにindex.htmlを返すようにサーバー側の設定が必要です。

http-serverはおそらくnpmからインストールしたNode.jsのツールだと思いますが、このツールはクライアントサイドでのルーティングに対応していないので、別の物を使うことをおすすめします。
私はよく node-static というパッケージの static コマンドを使っています。

https://github.com/cloudhead/node-static

このツールは起動時に --spa オプションをつけるだけでindex.htmlへフォールバックしてくれるので便利です。

Comments

[enom]

＞クライアントサイドルーティングをおこなう場合、本来ファイルが存在しないURLにリクエストされたときにindex.htmlを返すようにサーバー側の設定が必要

この部分、大変勉強になりました。頂いたご回答を元に、ルーティングすることができました。
本当にありがとうございました！