2017-08-14 193 views
22

我有一个新创建的Angular 4 CLI应用程序。Angular 4 Bootstrap下拉菜单需要Popper.js

npm install [email protected] jquery popper.js --save 

和编辑.angular-cli.json这样的:在运行此之后

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
], 
"scripts": [ 
    "../node_modules/jquery/dist/jquery.slim.min.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.min.js", 
    "../node_modules/popper.js/dist/umd/popper.min.js" 
], 

我仍然在Chrome控制台的一个问题:

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) 
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:17548) 
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:23163) 
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:50902) 
    at eval (<anonymous>) 
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9) 
    at Object.../../../../script-loader/index.js!../../../../bootstrap/dist/js/bootstrap.min.js (bootstrap.min.js?f885:1) 
    at __webpack_require__ (bootstrap a2f1d85ef068872b0530:54) 
    at Object.2 (scripts.bundle.js:66) 
    at __webpack_require__ (bootstrap a2f1d85ef068872b0530:54) 
    at webpackJsonpCallback (bootstrap a2f1d85ef068872b0530:25) 

我该如何解决这个问题?

+0

你不会有这样的问题,与本地角指令像https://ng-bootstrap.github.io .... –

回答

59

包括popper.jsbootstrap.js

"scripts": [ 
    "../node_modules/jquery/dist/jquery.slim.min.js", 
    "../node_modules/popper.js/dist/umd/popper.min.js" 
    "../node_modules/bootstrap/dist/js/bootstrap.min.js", 
], 
+10

确保您添加的版本./dist/umd文件夹中的popper.min.js。这个版本./dist/popper.min.js会导致jQuery的问题。 –

+0

怎么样'声明const $:any;' - 是否有办法避免这种情况并得到结果? – Sergey

+0

@DeveloperWonk你怎么知道“umd”文件夹中的popper.js是正确的? – sanjihan