AngularでNot Found対策

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

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は以下のように変わります。

• HISTORY APIを使用した場合：https://hoge.com/main
• ハッシュモードを使用した場合：https://hoge.com/#/main

もしハッシュモードを使用したくない場合は、Not Found(404)エラーが発生した場合は、サーバー側でindex.htmlを返すよう設定することで対応できます。

About 木村 29 Articles

Azureなどのクラウドでの稼働を主としたアプリケーション開発を行なっています。

Twitter YouTube