Angularでアプリを作ってGitHub上で公開する点で一瞬ハマった点

結論

ng buildコマンドに-bh <directory>オプションをつければよかったです。

今回やりたかったこと

ng buildコマンドで書き出す際にbaseタグを書き換えたかった

もう少し掘り下げ

angular-cliを使ってAngularアプリを作る練習をしています。
GitHubではmasterブランチの/docsフォルダに入っているものがそのままWebページとして
公開できるみたいなものがあるので、そこにAngularアプリをデプロイしたいというのが今回の目的です。

使っているangular-cliのバージョンはng -vコマンドで確認できます。

Pittan-Mac:PerfumeHub-schedule Pittan$ ng -v
                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
@angular/cli: 1.0.0-beta.32.3
node: 7.2.0
os: darwin x64

今回は1.0.0-beta.32.3を使いました。

通常はng serveを使ってローカル環境で開発を行います。
ブラウザからhttp://localhost:4200にアクセスするとイイカンジに作ったアプリが表示されます。

ある程度完成してきたところで、GitHub上にデプロイをするわけですが…
masterブランチの/docs以下に書き出せばいいとのことなので、何も考えずに
ng build --aot true --target=production -op docsと入れていましたが
GitHub上でアプリを開くと、js/css等のパス指定がおかしくてLoading...から進まない状態でした

書き出されたindex.htmlを見ると<base href="/">とあったので、
https://pittan.github.io/PerfumeHub-schedule/hogehoge.jsを見に行きたいのに
https://pittan.github.io/hogehoge.jsを参照しているような状態でした。

開発環境では特に問題なかったので、デプロイ後に気づいたような状態です。

どうしたか

ng buildのオプションに-bh /PerfumeHub-schedule/を追加しました。毎回これ書くのもアレなので、
npmのrun scriptsの中に"deploy:github" : "ng build --aot true --target=production -op docs -bh /PerfumeHub-schedule/"
の記述を追加しています。

masterブランチにプッシュしないといけないので「あっ…」っていう感じになりました。
練習環境なので、何度かプッシュし直しで恥ずかしいなぁ…くらいで済みましたが