Angular CLIでGitHub-Pagesを作成する際の注意点

# Angular CLIでGitHub-Pagesを作成する際の注意点


Angular CLIを利用して、サーバプログラムがローカルで起動できるようになったので、ディプロイ機能を使ってGitHub Pagesに表示してみたくなりました。1コマンドで配布できるような解説でしたので、簡単と思いきやいろいろな落とし穴があって、予想外に時間をとられてしまいました。以下は、私がはまってしまった落とし穴です。

**GitHub Pagesで表示しようとしたプロジェクト**,
<https://github.com/Ohtsu/o2-chart/>


## 落とし穴
   - ng buildでのコンパイルエラー

   - ng github-pages:deploy を実行するディレクトリ

   - Package.jsonでのプロジェクト名

   - ローカルデータの参照 




## ng buildでのコンパイルエラー

*Angular CLI*の**ng serve**を利用して、プログラムの稼働をチェックしていた場合は、ローカルサーバ上で全く問題はなくとも、Webpackによるコンパイル（トランスパイル）中にエラーが発生している場合があります。この場合には、ディプロイ用のdistディレクトリがうまく生成されません。

例えば、以下のソースは、d3.jsの記法に基づくものであり、ローカルサーバ上では全く問題なく稼働するものですが、コンパイル中に型定義エラーが発生します。

```
    let simulation = d3.forceSimulation()
        .force("link", d3.forceLink().id((d) => { 
            return d.id; 
        }))
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(_graphWidth/2, _graphHeight/2));

```

問題は、`return d.id`の部分で、jsonファイルの中で定義されている`id`は、参照できないとしてエラーとなります。
したがって、上記のソースは、以下のように`(d) =>`の部分を`(d:any) =>`のように書き換えて、コンパイルエラーを回避する必要があります。

```
    let simulation = d3.forceSimulation()
        .force("link", d3.forceLink().id((d:any) => { 
            return d.id; 
        }))
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(_graphWidth/2, _graphHeight/2));

```

## ng github-pages:deploy を実行するディレクトリ

*Angular CLI*の解説ビデオなどを参照していると、**ng serve**を`src`ディレクトリ内で実行している場合があるのですが、この流れで`src`ディレクトリ内で`ng github-pages:deploy`を実行すると、パーミッション・エラーが発生し、ディプロイに失敗します。この原因は、ローカルにgithub-pagesブランチを生成し、そこからremoteにpushしようとする際に、そのブランチ内で`src`ディレクトリを削除するプロセスがあるようで、起動ディレクトリであるため削除できないようです。したがって、`ng github-pages:deploy`は、プロジェクトのルートディレクトリで実行する必要があります。


## Package.jsonでのプロジェクト名

上記の問題点をクリアした後、GitHubにディプロイできるようになったのですが、loadはしても実際に表示ができませんでした。そこでエラー箇所を参照してみたところ、`index.html`内で参照している以下のファイルなどがないというものでした。

	
- "inline.js"
- "styles.365fde027791cdac098a.bundle.js"
- "main.378e5a4bc8a4ffbc0f17.bundle.js"



実際には、ディプロイされているので、起動ディレクトリの認識がおかしいということになりました。そこで判明したのが、Package.jsonで定義しているプロジェクト名とディプロイ先を一致させなければならない、という点です。当初私は、以下のようにPackage.json内でのプロジェクト名を`test01`としていました。そして、`o2-chart`というリポジトリのgithub-pageを作成しようとしていました。

```
{
  "name": "test01",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  ...
```

そこで、以下のようにディプロイ先とPackage.json内でのプロジェクト名を一致させることにより、やっとロードできるようになりました。

```
{
  "name": "o2-chart",
  "version": "2.0.0",
  "license": "MIT",
  "angular-cli": {},
  ...
```

## ローカルデータの参照

上記の修正により、プログラムは起動するようになったのですが、サーバプログラムと一緒に配布予定であったデータを読み込んでくれません。ローカルサーバでテストした際は、問題なく読み込んでいました。
例えば、以下のように`data`ディレクトリを作成しておき、そこのデータを相対指定して読み込んでいたのですが、github-pageではうまく読み込んでくれません。


```
this.geoMapDataJson = 
{
    "map":{
            "baseGeoDataUrl":"data/world.geojson",
            "scale":75,
            "keyDataName":"features",
            "targetPropertyName":"properties.name",
    },

```

そこでやむを得ず、GitHub上に別のリポジトリ（data)を作成し、以下のようにＵＲＬを変更することにより、参照できるようにしました。
これについては、たぶんコンパイル後のサーバ上のディレクトリを参照する方法があると思います。

```
this.geoMapDataJson = 
{
    "map":{
            "baseGeoDataUrl":"https://raw.githubusercontent.com/Ohtsu/data/master/o2-chart/world.geojson",
            "scale":75,
            "keyDataName":"features",
            "targetPropertyName":"properties.name",
    },

```

## やっとGitHub Pagesに表示可能に

上記の修正を経て、以下のようにやっとGitHub Pagesを利用できるようになりました。

**GitHub Pagesで表示**,
<https://ohtsu.github.io/o2-chart/>



## 環境

上記の内容は、以下の環境の中でのものですので、今後改善等される可能性があります。

   - angular-cli: 1.0.0-beta.19-3
   - node: 6.9.1
   - os: win32 x64


## 補足 ng github-pages:deployを利用しない方法

**ng github-pages:deploy** はまだバグがあるようなので、**ng build** で生成される **dist**以下のプログラムを直接pushする方法を採用したくなります。ただし、そのままアップロードしても、表示してくれません。配布先用に**index.html**を修正する必要があります。

自動で生成される**index.html**のHead部分は、以下のように**base href**が設定されていると思います。

```html

<head>
  <meta charset="utf-8">
  <title>ProjectName</title>
  <base href="/">

```

これを配布先のアドレスに応じて、変更します。例えば、**https://yourname.github.io/xxxxxx/**で表示されるページとして配布するのであれば、以下のように変更する必要があります。
 

```html

<html>
<head>
  <meta charset="utf-8">
  <title>ProjectName</title>
  <base href="/xxxxxx/">

```

これにより、アップロードされたjsファイルなどが読み込めるようになり、表示されるようになります。

**参考文献**

　Angular CLIによるGitHub Pagesの作成については、以下が大変参考になりました。

- "無料で使える！GitHub Pagesを使ってWebページを公開する方法",TechAcademy Magazine,
<https://techacademy.jp/magazine/6445>

- "GitHubでWebページを公開する方法",Qiita,by Yuki_Yamashina,
<http://qiita.com/Yuki_Yamashina/items/5d8208c450195b65344c>

- "GitHubを使って3分でHPを公開する",Qiita,by budougumi0617,
<http://qiita.com/budougumi0617/items/221bb946d1c90d6769e9>

- "Quick Angular 2 Hosting with the Angular CLI and GitHub Pages",by TJ VanToll, 
<http://developer.telerik.com/featured/quick-angular-2-hosting-angular-cli-github-pages/>