AngularでNot Found対策

2018-03-01 木村 Azure, OSS 0

こんにちは。サイオステクノロジー技術部のKです。
開発の際につまずいたことや小ネタなどを記載します。今回は、Angularの話題です。

1 AngularでNot Found?!
2 原因
3 対策

AngularでNot Found?!

Angularで作成したサイトをAzure上に作成した実行環境にデプロイして動かし、いくつか画面操作をした後、ブラウザの更新ボタンをクリックして画面をリロードしたところ、突然Not Found(404)エラーが発生した。

原因

AngularではデフォルトでHTML5 HISTORY APIのpushStateという機能を使っているため、非同期通信によりコンテンツを入れ替えた際、URLが変わります。しかし、Angularで作成したサイトにはルートにしかindex.htmlがないため、Not Foundになってしまったようです。

ちなみに、開発環境ではAngular CLIを使用して動かしていましたが、その時は更新ボタンをクリックしてもNot Foundは発生していませんでした。それは、Angular CLIが提供しているツールでは、Not Found(404)エラー発生時にはindex.htmlを返すようデフォルトで設定されているためです。

対策

Angularでは、デフォルトではHISTORY API使用されますが、ルート設定する際のパラメーター「useHash」にtrueを設定することにより、HISTORY APIを使用せず、ハッシュモード（「〜/#/main」のようなハッシュ(#〜)でパスを表現するモード）が有効になります。
そのため、ルート設定にて以下のように設定すれば、リロードをしてもNot Foundは発生しなくなります。

ルート設定(app.routing.ts)

import { ModuleWithProviders } from '@angular/core';
import { RouterModule } from '@angular/router';

import { LoginComponent } from './component/login.component';
import { MainComponent } from './component/main.component';

const myRoutes = [
  { path: '', component: LoginComponent },
  { path: 'main', component: MainComponent }
];

export const MY_ROUTES: ModuleWithProviders 
  = RouterModule.forRoot(myRoutes, {useHash: true});

ハッシュモードを使用すると、URLは以下のように変わります。