将jQuery插件导入Angular 2+拒绝执行脚本,因为其MIME类型('text / html')不可执行

时间:2018-04-18 17:40:51

标签: javascript jquery html angular

我需要在HTML文件中加载JavaScript(jQuery插件)。但它似乎没有奏效。这是在Angular-CLI服务器上运行的(ng服务)这是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类型检查是   启用。

我找到this question,其中解决方案似乎正在纠正type属性,但这并没有为我解决。我尝试了text/javascriptapplication/javascript

我需要在这做什么?

编辑:网络控制台显示脚本的404错误。表示请求没有可用的响应数据。内容类型为text/html; charset=utf-8

注意:我最初将此作为一个比我的实际代码更简单的示例发布,因为我认为它与Angular CLI服务器没有关系。可能就是这种情况,所以我将我的示例恢复为我的实际代码。

2 个答案:

答案 0 :(得分:13)

尝试将js脚本放在src/assets文件夹中。然后它应该由开发服务器

提供正确的mime类型

然后参考下面的

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

您可以将文件添加到angular-cli.json的“脚本”属性(如果使用角度为6,则为angular.json

,而不是在index.html中包含jquery和您的脚本。
"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

答案 1 :(得分:5)

我遇到了类似的问题

issue

,并通过index.html文件中的简单更改来解决

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