Angular2项目安装Bootstrap 4.0.0-beta.3后popper.js依赖缺失报错

嘿，这个问题我太熟悉了！Bootstrap 4从早期beta版本开始，就把Popper.js作为核心依赖项来处理弹窗、下拉菜单这类组件的定位逻辑，但它被标记为peerDependency——npm默认不会自动安装peer依赖，所以才会弹出你看到的这个模块找不到的错误。

下面是快速解决步骤：

1. 手动安装Popper.js #

在项目根目录下执行这条命令，把Popper.js安装到你的项目中：

npm install popper.js@^1.14.3 --save

（指定^1.14.3是因为Bootstrap 4 beta3和这个版本的Popper.js兼容性最好，能避免版本不匹配的问题）

2. 确保脚本加载顺序正确 #

Bootstrap的JS代码依赖Popper.js先加载，所以要调整你的配置或者导入顺序：

• 如果是用老版本Angular CLI，编辑.angular-cli.json里的scripts数组，按顺序添加：

  "scripts": [
    "../node_modules/popper.js/dist/umd/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]
  

• 如果是新版本Angular CLI，编辑angular.json的architect > build > options > scripts，同样按顺序添加上述路径。
• 要是你是直接在boot.browser.ts里导入Bootstrap，记得先导入Popper.js：

  import 'popper.js/dist/umd/popper.min.js';
  import 'bootstrap/dist/js/bootstrap.min.js';
  

  这里用umd目录下的文件是因为Bootstrap需要UMD格式的模块才能正确识别Popper.js。

做完这两步，重新启动你的Angular项目，这个错误应该就消失啦！

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