Angular项目中自定义JS文件调用Bootstrap 5报错的解决方法咨询

核心原因 #

你的自定义JS文件加载时机早于bootstrap.bundle.min.js，或者Bootstrap未被正确挂载到全局window对象，导致脚本执行时找不到bootstrap变量。

解决方案 #

1. 严格控制脚本加载顺序 #

确保bootstrap.bundle.min.js在自定义JS文件之前完成加载：

• 检查angular.json的scripts数组，bootstrap.bundle.min.js的配置位置要在自定义JS文件之前（如果自定义JS是通过这里配置引入的）。
• 若直接在index.html用<script>标签引入自定义JS，需将该标签放在</body>前，且位于Angular自动注入的Bootstrap脚本之后。Angular会把angular.json中scripts配置的文件注入到</body>前，所以自定义脚本标签要放在这些自动注入的脚本之后，示例：

<!-- Angular自动注入的bootstrap.bundle.min.js会在此位置生成 -->
<script src="assets/js/your-custom-script.js"></script>
</body>

2. 以ES模块方式导入Bootstrap #

如果自定义JS文件是ES模块（需通过type="module"的脚本标签引入），可直接在文件顶部导入Bootstrap：

import * as bootstrap from 'bootstrap';

// 初始化popover示例
document.addEventListener('DOMContentLoaded', function() {
  const popoverTriggers = document.querySelectorAll('[data-bs-toggle="popover"]');
  [...popoverTriggers].forEach(trigger => new bootstrap.Popover(trigger));
});

同时在index.html中引入该脚本时添加type="module"属性：

<script type="module" src="assets/js/your-custom-script.js"></script>

3. 手动将Bootstrap挂载到全局对象 #

若上述方法无效，可在Angular主入口文件main.ts中强制把Bootstrap挂载到全局window：

import * as bootstrap from 'bootstrap';
(window as any).bootstrap = bootstrap;

这样自定义JS文件就能直接访问全局的bootstrap变量。

额外注意事项 #

• 确保安装的Bootstrap 5版本无兼容性问题，避免版本冲突。
• 不要同时使用import 'bootstrap'和angular.json的scripts配置，防止重复加载。

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