时间戳

首页 > 解决方案 > Bootstrap 和 Angular 未捕获的 TypeError

html - Bootstrap 和 Angular 未捕获的 TypeError

问题描述

我一直在尝试在 Angular 项目中将 Bootstrap<link>和<script>标签添加到我的 HTML 中。我从这里获得所有 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 项目，现在认为它可能是问题的一部分。

标签： htmlcssangularbootstrap-4electron

解决方案

我注意到

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

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

还

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

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

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

    npm install bootstrap@next --save

    或者

    （对于引导程序 3）

    npm install bootstrap --save

  2. 配置.angular-cli.json：

    "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.scss" ]

  3. 配置src/style.css或src/style.scss：

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

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

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

来源：

推荐阅读