Membuat bootstrap-multiselect bekerja dengan Angular 2+
Tidak bisa membuat bootstrap-multiselect (http://davidstutz.de/bootstrap-multiselect) bekerja dengan Angular2+. Sejauh yang saya lihat semuanya terpasang dengan benar:
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",
]
Tapi ketika saya memuat aplikasi di browser, saya mendapatkan kesalahan:
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
Tebakan saya adalah bahwa webpack mengambil skrip untuk membuat bundle dalam urutan yang salah. Seharusnya menempatkan jQuery sebelum bootstrap-multiselect, tetapi malah menempatkannya sebaliknya.
Jawaban #1
Memang bisa jadi itu masalah webpack. Berdasarkan pengalaman saya, selalu lebih mudah menggunakan paket yang dikemas dengan cara sehingga siap digunakan oleh Angular.
Ada sebuah paket yang bernama angular2dropdown-multiselect.
Apakah menggunakan paket ini menjadi opsi bagi Anda ataukah bootstrap-multiselect merupakan kebutuhan mutlak untuk kasus penggunaan Anda?