Faire fonctionner bootstrap-multiselect avec Angular 2+


Impossible de faire fonctionner bootstrap-multiselect (http://davidstutz.de/bootstrap-multiselect) avec Angular2+. Autant que je puisse voir, tout est installé correctement :

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

Mais lorsque je charge l'application dans un navigateur, j'obtiens une erreur :

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

Je suppose que webpack prend les scripts pour créer le bundle dans le mauvais ordre. Il devrait mettre jQuery avant bootstrap-multiselect, mais à la place il les met dans l'autre sens.

Réponse #1

Cela pourrait en effet être un problème de webpack. D'après mon expérience, il est toujours plus facile d'utiliser un paquet qui a été emballé de manière à être prêt à être utilisé par Angular.

Il y a un paquet appelé angular2dropdown-multiselect.

Serait-ce une option pour vous d'utiliser ce paquet ou bootstrap-multiselect est-il une exigence stricte pour votre cas d'utilisation ?