Angular项目引入Bootstrap遇Uncaught TypeError错误求助

哈哈，这个坑我刚踩过没多久！你遇到的这个错误，核心原因就是Bootstrap的JavaScript文件依赖的库没按正确顺序加载——Bootstrap 4及更早版本的JS是基于jQuery写的，它得先找到jQuery的$.fn对象才能正常初始化，如果你把Bootstrap的<script>放在jQuery前面，那它肯定找不到这个属性，直接报错。

给你两种解决方案，按需选： #

方案一：按正确顺序加载CDN（适合坚持用原生Bootstrap的情况）

如果用的是Bootstrap 4.x，必须严格按这个顺序加载脚本：

1. 先加载jQuery的CDN
2. 接着加载Popper.js的CDN（Bootstrap 4需要它处理弹窗、下拉菜单等组件）
3. 最后加载Bootstrap的JS文件
   Bootstrap的CSS可以正常放在<head>里，不影响。

修正后的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">
  <!-- Bootstrap CSS 放在head里没问题 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
  <app-root></app-root>

  <!-- 1. 先加载jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <!-- 2. 再加载Popper.js -->
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <!-- 3. 最后加载Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

如果用的是Bootstrap 5.x，那更简单——Bootstrap 5已经彻底移除了jQuery依赖，你只需要确保Bootstrap的JS文件在页面最后加载（或者给它加defer属性），不需要引入jQuery和Popper了：

<!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://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <app-root></app-root>

  <!-- Bootstrap 5 JS 放在页面末尾即可 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

方案二：改用Angular专属的Bootstrap组件库（更推荐）

毕竟你是在Angular项目里开发，用原生Bootstrap的CDN总有点违和，而且容易出这种加载顺序的问题。更推荐用ng-bootstrap或者ngx-bootstrap，这两个都是专门为Angular打造的Bootstrap组件库，完全基于Angular的组件化思想，不需要依赖jQuery，直接用Angular的方式调用组件，省心太多。

最后再检查下： #

你可以打开浏览器的开发者工具（F12），看一下Network标签里的脚本加载顺序，确认jQuery（如果需要的话）是在Bootstrap JS之前完成加载的，这样就能解决这个错误了。

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