使bootstrap-multiselect与Angular 2+配合使用

时间:2018-09-05 11:59:06

标签: angular twitter-bootstrap typescript bootstrap-4 bootstrap-multiselect

无法使bootstrap-multiselect(http://davidstutz.de/bootstrap-multiselect)与Angular2 +一起使用。据我所知,一切都已正确安装:

packages.json

"dependencies": {
  (...)
  "bootstrap": "^4.1.3",
  "bootstrap-multiselect": "^0.9.13-1",
  "jquery": "^3.3.1",
}

angular.json

"styles": [
  "./node_modules/bootstrap/scss/bootstrap.scss",
  "./node_modules/bootstrap-multiselect/dist/css/bootstrap-multiselect.css",
  "src/styles.css"
],
"scripts": [
  "./node_modules/jquery/dist/jquery.js",
  "./node_modules/bootstrap/dist/js/bootstrap.js",
  "./node_modules/bootstrap-multiselect/dist/js/bootstrap-multiselect.js",
]

但是当我在浏览器中加载应用程序时,出现错误:

TypeError: $ is undefined
./node_modules/bootstrap-multiselect/dist/js/bootstrap-multiselect.js/<
bootstrap-multiselect.js:1388
./node_modules/bootstrap-multiselect/dist/js/bootstrap-multiselect.js
bootstrap-multiselect.js:44
__webpack_require__
./src/app/tasks/tasks.component.ts
__webpack_require__
./src/app/app.module.ts
__webpack_require__
./src/main.ts
__webpack_require__
[0]
__webpack_require__
checkDeferredModules
webpackJsonpCallback

我的猜测是webpack会使用脚本以错误的顺序创建包。应该将jQuery放在bootstrap-multiselect之前,但是反之则相反。

1 个答案:

答案 0 :(得分:0)

这确实可能是一个webpack问题。以我的经验,使用打包好的包装总是比较容易,以便可以随时使用。

有一个名为angular2dropdown-multiselect的软件包。

使用此软件包是否可以作为一种选择,或者对于您的用例来说,bootstrap-multiselect是一项硬性要求吗?