Bootstrap-multiselect laten werken met Angular 2+

Kan bootstrap-multiselect (http://davidstutz.de/bootstrap-multiselect) niet aan de praat krijgen met Angular2+. Voor zover ik kan zien is alles correct geïnstalleerd:

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",
]

Maar wanneer ik de applicatie in een browser laad, krijg ik een fout:

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

Mijn gok is dat webpack scripts in de verkeerde volgorde neemt om de bundel te maken. Het zou jQuery voor bootstrap-multiselect moeten plaatsen, maar in plaats daarvan plaatst het dat andersom.

Antwoord #1

Het kan inderdaad een webpack-probleem zijn. Uit mijn ervaring is het altijd gemakkelijker om een pakket te gebruiken dat op een manier is verpakt zodat het klaar is om door Angular te worden gebruikt.

Er is een pakket genaamd angular2dropdown-multiselect.

Zou het een optie voor je zijn om dit pakket te gebruiken of is bootstrap-multiselect een harde vereiste voor jouw gebruikssituatie?