AngularでNot Found対策

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

AngularでNot Found?!

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

原因

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を返すよう設定することで対応できます。

ご覧いただきありがとうございます! この投稿は役に立ちましたか? 役に立った 役に立たなかった

Be the first to comment

コメント投稿

Your email address will not be published.


*