Bootstrap 和 Angular 未捕获的类型错误答案

【问题标题】：Uncaught TypeError with Bootstrap and AngularBootstrap 和 Angular 未捕获的类型错误
【发布时间】：2018-10-07 04:40:57
【问题描述】：

我一直在尝试将 Bootstrap <link> 和 <script> 标签添加到我在 Angular 项目中的 HTML 中。我从here 获得所有 CDN，但出现以下错误

Uncaught TypeError: Cannot read property 'fn' of undefined
at bootstrap.min.js:6

我做错了什么？这是我的 index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>App</title>
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>
<body>
  <app-root></app-root>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>

更新：我在这个问题中加入了electron 标签，因为这是一个使用 Electron 框架运行的 Angular 项目，现在认为它可能是问题的一部分。

【问题讨论】：

这里没有错误。您是否正在运行可能会阻止其中某些内容的添加阻止程序或类似程序？
@Zlatko 不确定是否诚实。但我不这么认为。它是使用 Electron 框架运行的 Angular 项目。
我刚刚更新了包含electron 标签的问题。起初，我不认为这可能是问题的一部分。但也许是？
可能是。在这种情况下，最好的办法是像有人建议的那样尝试非超薄 jQuery。

标签： html css angular bootstrap-4 electron

【解决方案1】：

我注意到了

integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"

对我来说不应该在那里。这可能是导致问题的原因。

也

为什么不在本地添加引导程序呢？它有很多优点，也是我们大多数人的做法。

在您的 Powershell 或 CMD 或 IDE（编码程序）的控制台类型中：

（对于 Bootstrap 4（测试版））：

npm install bootstrap@next --save

或

（对于引导程序 3）

npm install bootstrap --save
配置.angular-cli.json：

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.scss" ]
配置src/style.css或src/style.scss：

@import '~bootstrap/dist/css/bootstrap.min.css';

或者您可以使用 ngx-bootsrap，它是引导程序的角度包装器。

这有起有落。 ngx-bootstrap 总体上缺少许多组件，并且没有最新最好的引导程序，但至少它是为在 Angular 中使用而量身定制的。

来源：

【讨论】：

好的。我刚做了。
感谢@tatsu，我最终在本地添加了 Bootstrap

【解决方案2】：

这可能与此有关： link

尽量只包含缩小版（不是 slim.min）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

我仍然收到错误:(现在它不仅在错误中显示at bootstrap.min.js:6，而且还包括at util.js:56

【解决方案3】：

Bootstrap 依赖于 jQuery。在您的索引 HTML 中，在包含任何 Javascript 导入之前，您需要执行以下操作：

<script>
  var $ = jQuery = require("jquery")
</script>

【讨论】：