web-dev-qa-db-ja.com

jQueryプラグインをAngular 2+にインポートしています。MIMEタイプ（ 'text / html'）が実行可能でないため、スクリプトの実行を拒否しました

JavaScript（jQueryプラグイン）をHTMLファイルに読み込む必要があります。しかし、機能していないようです。これはAngular-CLIサーバーで実行されています（ng serve）ここにHTMLがあります。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <base href="/">

  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

  <script src="./test.js" type="text/javascript"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

私はこのエラーを受け取ります：

' http：// localhost：8080/test.js 'からのスクリプトの実行を拒否しました。MIMEタイプ（ 'text/html'）が実行可能ではなく、厳密なMIMEタイプチェックが有効になっているためです。

私は この質問 を見つけました。ソリューションはtype属性を修正しているようですが、それは私のためにそれを修正しませんでした。私は試した text/javascriptおよびapplication/javascript。

ここで何をする必要がありますか？

編集：ネットワークコンソールには、スクリプトの404エラーが表示されます。リクエストに使用可能な応答データがないと言います。コンテンツタイプはtext/html; charset=utf-8

注：Angular CLIサーバーに関係しているとは思わなかったため、実際のコードよりも最小限の例としてこれを最初に投稿しました。私が持っている実際のコードの例。

javascriptjqueryhtmlangular
8
BBaysinger

Jsスクリプトをsrc/assetsフォルダーに入れてみてください。次に、開発サーバーによって正しいMIMEタイプで提供される必要があります

次に、以下のように参照します

<script src="/assets/scripts/test.js" type="text/javascript"></script>

Index.htmlにjqueryとスクリプトを含めるのではなく、angular-cli.json（またはangular 6を使用している場合はangular.jsonの「スクリプト」プロパティにファイルを追加できます。

"scripts":
 [
      //include jQuery here, e.g. if installed with npm
      "../node_modules/jquery/dist/jquery.min.js" ,
      "assets/scripts/test.js"
 ]

注：ng serveまたは.angular-cli.jsonファイルを変更した後、angular.jsonを再起動することを忘れないでください

13
David

同様の問題に遭遇しました

issue

index.htmlファイルの簡単な変更により解決

<base href="./"> // remove dot (.) and your app will execute scripts
5
WasiF