当たり前の結果ですが、意識していないと絶対引っかかってしまうのです〜
今回は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化を進めています。
tree-mapsではElectronを既に使用しており、loadURLにURLを指定していましたが、今回はオンラインの必要が無いサイトなのでhtmlを読み込む形式にしました。成果物をGCSにアップロードするか?世代管理どうしよう?等、問題は結構ありますが、準備でき次第告知しようと思います!