Angular 2+ で bootstrap-multiselect を動作させる
Angular2+でbootstrap-multiselect (http://davidstutz.de/bootstrap-multiselect) を動作させることができません。見たところ、すべて正しくインストールされているようです:
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
確かにそれはwebpackの問題かもしれません。私の経験では、Angularで使用できるようにパッケージ化されているパッケージを使う方が常に簡単です。
angular2dropdown-multiselectというパッケージがあります。
このパッケージを使用することは選択肢になりますか、それとも bootstrap-multiselect があなたのユースケースで絶対に必要ですか?