☰

モジュールスクリプトの読み込みに失敗しました 質問する

tag-icon • tag-icon angular typescript heroku mime-types
モジュールスクリプトの読み込みに失敗しました 質問する

Heroku に Angular アプリをデプロイした後、URL に到達すると空白のページが表示され、コンソールに MIME タイプ エラーが表示されます。

エラーは次のとおりです:

モジュール スクリプトの読み込みに失敗しました: サーバーは JavaScript 以外の MIME タイプ「text/html」で応答しました。モジュール スクリプトには、HTML 仕様に従って厳密な MIME タイプ チェックが適用されます。

ベストアンサー1

エラーの考えられる説明の一つ:
アプリをベース URL に直接デプロイするのではなく、サブフォルダーにデプロイすると、この動作が発生します。

何が起こるのですか：

  • に行くとHTMLが見つかりますwww.yourbase.com/yoursubfolder/index.htmlが、Angularアプリは ではwww.yourbase.com/resource.cssなく から相対パス（resource.cssとしましょう）でリソースを取得します。www.yourbase.com/yoursubfolder/resource.css
  • www.yourbase.com/resource.cssあなたのウェブサーバーはおそらく（おそらくあなたのwww.yourbase.com/index.html）デフォルトページを提供しているでしょう。
  • したがって、CSS の代わりにデフォルト ページのコンテンツが読み込まれます。

修正するには

Angularアプリを構築する

ng build --prod --base-href yoursubfolder

またはindex.htmlにベースパスを設定します

<head>
    <base href="/yoursubfolder/">
</head>

おすすめ記事