web-dev-qa-db-ja.com

Angular Cordovaで8 ngビルドのスローMIMEエラー

Cordovaアプリをビルドするためにng build --prod --base-href ./を実行すると、最終出力は次のようにエラーをスローします。

モジュールスクリプトのロードに失敗しました：サーバーはJavaScript以外のMIMEタイプ ""で応答しました。 HTML仕様に従って、モジュールスクリプトに厳密なMIMEタイプチェックが適用されます。

タイプモジュールをtext/javascriptに変更することでこれを修正しました

src = "runtime-es2015.858f8dd898b75fe86926.js" type = "module">

src = "runtime-es2015.858f8dd898b75fe86926.js" type = "text/javascript">

Angular.jsonファイル内で修正できるものはありますか、それともここで何か不足していますか？

angularangular-cliangular8ng-build
22
Nidhin Joseph

同じ問題がありました。

  1. 新しいプロジェクトを作成しました。

  2. 製造バージョンを構築

      "build-production": "ng build --configuration=production --extract-css=false --prod --aot"

  3. NGINXに展開

  4. Chrome要素インスペクタのタグ間にコンテンツがないホワイトページ

修正

Tsconfig.jsonを更新する

        "target": "es5",

次に、アプリケーションを再ビルドして、再度デプロイします。

このソリューションでうまくいきました。デプロイしたアプリにコンテンツがあります。

それが誰かを助けることを願って

18
englishPete

angular/electronアプリを作成するときに、同じ問題（同様）が発生します。

私はここの手順に従います：

https://alligator.io/angular/electron/

そして、electronアプリを実行すると、空白の（白い）画面が表示されます。開発ツールでアプリを検査すると、コンソールに次のようないくつかのエラーメッセージが表示されます。

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

これらは、dist/index.htmlファイルにあるすべてのJSインクルードに表示されます。

（このような）すべてのスクリプトタグを手動で実行する必要があります。

<script src="runtime-es2015.858f8dd898b75fe86926.js" type="module">

それらを変更して、mimeタイプを含めます。

<script src="runtime-es2015.858f8dd898b75fe86926.js" type="text/javascript">

そうして初めて、それは電子ウィンドウ内で機能します。 「ng serve」を使用してプロジェクトを実行し、angularによって提供されるWebページを見ると、問題なく動作します。

これは、ファイルシステムからローカルに読み込まれ、MIMEタイプを提供しないことと関係があると思いますが、Webサーバーから提供される場合はMIMEタイプが提供されます。

8
John

ファイル「tsconfig.json」のプロパティ「target」を「es5」に変更する必要があります。次のブログ記事「デフォルトでの差分読み込み」をお読みください。

https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27

このプロパティは、ブラウザの機能に基づいて、最新または従来のJavaScriptを選択します。

<script type="module" src="…"> //モダンJS

<script nomodule src="…"> //レガシーJS

7
Ameen Rashad

Cordovaを使用したことはありませんが、Nginxで同じ問題が発生しました。私が実装したソリューション（受け入れられたソリューションによって提案された回帰なし）：MIMEタイプに「モジュール」を追加します。 関連の質問を参照してください

1
jbh

ルートディレクトリ内のbrowserlistファイルを変更して、Electronアプリケーションを（Angular 8で）動作させることができました。投稿と同様に、私もMimeタイプに問題がありました。

追加した Chrome >= 70 and Chrome <= 72は、Electronの最新のChromiumインスタンスが72であるファイルに追加します。トリックを行うように思われます。

編集：私はあなたがCordovaを使用していることを理解していますが、それが何で構築されているのかよくわかりません（例：Chromium）。この場合、以前のバージョンのブラウザを反映するようにブラウザリストを変更してみてください。これを実現するために必要なクエリをここで見つけることができます： https://github.com/browserslist/browserslist

お役に立てれば。かなり頭痛がした。

1
Justin Jackson