将 jQuery 插件导入 Angular 2+ 拒绝执行脚本，因为它的 MIME 类型（'text/html'）不可执行
Posted
技术标签:
【中文标题】将 jQuery 插件导入 Angular 2+ 拒绝执行脚本，因为它的 MIME 类型（\'text/html\'）不可执行【英文标题】：Importing jQuery plugin into Angular 2+ Refused to execute script because its MIME type ('text/html') is not executable将 jQuery 插件导入 Angular 2+ 拒绝执行脚本，因为它的 MIME 类型（'text/html'）不可执行 【发布时间】：2018-09-29 01:26:46 【问题描述】：我需要在 html 文件中加载 javascript（jQuery 插件）。但这似乎不起作用。这是在 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 类型检查是 已启用。
我找到了this question，解决方案似乎正在纠正type 属性，但这并没有为我解决。我试过text/javascript和application/javascript。
我需要在这里做什么？
编辑：网络控制台显示脚本的 404 错误。表示请求没有可用的响应数据。内容类型为text/html; charset=utf-8
注意：我最初将其发布为比我的实际代码更小的示例，因为我认为它与 Angular CLI 服务器无关。可能是这样，所以我将我的示例恢复为我拥有的实际代码。
【问题讨论】：
修复您的网络服务器。 因为您的问题是您的网络服务器正在返回 HTML，这几乎可以肯定是路由错误，但您没有提供 相关 信息。打开 devtools，查看网络选项卡，然后检查您实际收到的内容（可能是 HTML 而不是您的脚本）。问题应该（尽可能）有足够的信息来重现问题本身的错误。 我正在向您提供我拥有的信息。这是在 Angular 开发服务器（ng serve）上运行的。 您不会手动注入该脚本标签，对吧？那是 Angular 开发服务器注入的脚本标签？你告诉 Angular 把它命名为 test.js 吗？ 前几天我遇到了同样的错误。对我来说，这只是一个路径问题。我从public 文件夹中提供文件，所以我将src 链接更正为指向/path/test.js，它对我来说很好用。要测试您的脚本，只需将该 url 复制到您的浏览器中，如果它没有返回任何内容，则您的路径脚本不正确。
【参考方案1】：
尝试将您的 js 脚本放在 src/assets 文件夹中。然后由开发服务器提供正确的 mime 类型
然后像下面这样引用它
<script src="/assets/scripts/test.js" type="text/javascript"></script>
您可以将文件添加到angular-cli.json（或angular.json，如果使用角度6）的“脚本”属性中，而不是在index.html中包含jquery和您的脚本
"scripts":
[
//include jQuery here, e.g. if installed with npm
"../node_modules/jquery/dist/jquery.min.js" ,
"assets/scripts/test.js"
]
注意：修改.angular-cli.json或angular.json文件后不要忘记重启ng serve
【讨论】：
是的，这就是我根据@Curious13 的回答解决的方法。我早该知道。某处可能有重复。【参考方案2】：我遇到了类似的问题
并通过index.html 文件中的简单更改解决
<base href="./"> // remove dot (.) and your app will execute scripts
【讨论】：
以上是关于将 jQuery 插件导入 Angular 2+ 拒绝执行脚本，因为它的 MIME 类型（'text/html'）不可执行的主要内容，如果未能解决你的问题，请参考以下文章
如何将 jQuery 导入 Angular2 TypeScript 项目？
Angular 6 - 集成jQuery / JavaScript文件