Angular 2+导入jQuery插件报错：MIME类型不允许执行脚本

这个问题我之前帮人排查过，本质是Angular CLI的开发服务器对静态资源的服务规则导致的：你直接引用./test.js时，服务器找不到这个文件，返回的是HTML格式的404错误页面，浏览器检测到MIME类型是text/html而非可执行的application/javascript，所以就抛出了「Refused to execute script because its MIME type ('text/html') is not executable」的报错。

下面是具体的解决步骤：

• 第一步：将脚本放到正确的静态资源目录
  Angular CLI默认只会把src/assets/目录下的文件当作静态资源来提供服务，所以先把你的test.js移动到src/assets/文件夹里。

• 第二步：修正脚本引用路径
  把原来的<script src="./test.js" type="text/javascript"></script>改成：

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

  因为你的页面设置了<base href="/">，所以直接从根路径指向assets下的文件即可，不需要加./前缀。

• 第三步：确认jQuery加载顺序
  你目前的代码已经把jQuery放在插件脚本之前加载了，这点很重要——jQuery插件必须在jQuery核心库加载完成后才能执行，所以要保持这个顺序不变。

• 可选：检查assets配置（如果自定义过）
  如果你修改过Angular的配置文件，打开angular.json，找到projects -> [你的项目名] -> architect -> build -> options -> assets，确保数组里包含src/assets（默认是包含的），比如：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

修改后的完整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="assets/test.js" type="text/javascript"></script>
</head>
<body>
  <!-- 你的页面内容 -->
</body>
</html>

另外提个小建议：如果你的test.js是jQuery插件，最好用自执行函数包裹代码，避免全局变量冲突，比如：

(function($) {
  // 你的插件代码
})(jQuery);

内容的提问来源于stack exchange，提问作者BBaysinger