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 ?