AngularでElectron起動時にトップページが404になってしまう件に対応する

当たり前の結果ですが、意識していないと絶対引っかかってしまうのです〜

今回はAngularというか、Electronネタになります。

Electron起動時に起きる事

ElectronのloadURLにURLではなくhtmlを指定して起動した後、以下のように404になりました。

何が起きたのか

ElectronはChromiumなので、Chrome DevToolsが起動できます。起動してURLを確認したいので、ElectronでloadURLしたhtmlに以下を追加して起動してみます。

<script>
console.log(location);
</script>

href部分を見ると、「electron.html」になっている事が確認できます。

Angularのルーティングを確認する

app-routing.module.tsを開き、URLが「/electron.html」の際にどのコンポーネントが使用されるか、確認してみて下さい。

Electronを意識していない場合、まず間違いなくルーティングにヒットせず、404に行ってしまうと思います。

という事で、以下のようにルーティングを追加します。

const routes: Routes = [
  {path: 'character-count', component: CharacterCountComponent, pathMatch: 'full'},
・・・略・・・
  {path: '', component: TopComponent, pathMatch: 'full'},
  {path: '**', component: NotfoundComponent},
];

↓

const routes: Routes = [
  {path: 'character-count', component: CharacterCountComponent, pathMatch: 'full'},
・・・略・・・
  {path: '', component: TopComponent, pathMatch: 'full'},
  {path: 'electron.html', redirectTo: '/', pathMatch: 'full'}, // ← これを追加！
  {path: '**', component: NotfoundComponent},
];

404の設定の前に、以下を追加し、トップページにリダイレクトしてしまいます。

  {path: 'electron.html', redirectTo: '/', pathMatch: 'full'},

ルーティング追加後に再確認

😙 今度は起動後に正常にトップページが表示されるようになりました！！

location.hrefも / のトップページになっていますね。

雑感

これだとWEBサイト上でelectron.htmlと叩いてもトップページにリダイレクトされるので、念には念を入れる場合は、environmentを利用して、electron起動時のみルーティングを追加する、等を行ってもいいかもしれませんね。通常はそこまでやる必要は無いように思えますが。

この画面キャプチャから解るように、現在以下の私の個人サイトのElectron化を進めています。

www.string-utility.com

tree-mapsではElectronを既に使用しており、loadURLにURLを指定していましたが、今回はオンラインの必要が無いサイトなのでhtmlを読み込む形式にしました。成果物をGCSにアップロードするか？世代管理どうしよう？等、問題は結構ありますが、準備でき次第告知しようと思います！