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

アバター画像
About 木村 29 Articles
Azureなどのクラウドでの稼働を主としたアプリケーション開発を行なっています。
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる