notebook

都内でWEB系エンジニアやってます。

angular6でgithub-pagesにアップする

angular6以前はただただnghコマンド叩くだけでリポジトリのページでも問題なく表示できたのですがangular6になってマルチプロジェクトに対応したからか分からないけど成果物のパスが変わったっぽい

以前はdist以下に各種ファイルが生成されていた

  • angular6以前のビルド後
$ ng build
$ ls dist/
index.html
.....
.....
.....
  • angular6でのビルド後
$ ng build
$ ls dist/
sample
$ ls dist/sample
index.html
.....
.....
.....

なのでnghのオプションで対象ディレクトリを指定すれば今まで通りgithub-pagesでホストできるようになる

1から手順を追っていくとこんな感じ

  • install プロジェクト作成
npm isntall -g @angular/cli
ng new sample
  • github-pagesのインストール
npm isntall --save angular-cli-ghpages
  • ビルド、publish
npx ng build --prod --aot --base-href "/REPOSITORY_NAME/"
npx ngh --dir dist/REPOSITORY_NAME