Bootstrap accordion not working in angular 9
Question
I am working with Angular 9 Installed bootstrap and jquery following is entry in my package.json "bootstrap": "^4.4.1", "jquery": "^3.5.0", imported css and js files in angular.json like below
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
And added following code in my html body
<body> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Collapsible Group Item #1 </button> </h2> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> Body1 </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> Body2 </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> Body 3 </div> </div> </div> </div> </body>
But when i click Accordion i am getting following error in console
Uncaught TypeError: Cannot convert object to primitive value
at RegExp.test (<anonymous>)
at HTMLDivElement.<anonymous> (bootstrap.js:1509)
at Function.each (jquery.js:381)
at jQuery.fn.init.each (jquery.js:203)
at jQuery.fn.init._jQueryInterface [as collapse] (bootstrap.js:1503)
at HTMLDivElement.<anonymous> (bootstrap.js:1563)
at Function.each (jquery.js:381)
at jQuery.fn.init.each (jquery.js:203)
at HTMLButtonElement.<anonymous> (bootstrap.js:1558)
at HTMLDocument.dispatch (jquery.js:5429)
I am not able to figure out what is the issue Pls help.
2 answers
solution1
1 ACCPTED 2020-04-16 17:40:06
It's an issue with "jquery": "^3.5.0"
Downgrading to "jquery": "3.4.1" fixes it (make sure you remove ^).
If you must use 3.5.0, try modifying manually:
node_modules/bootsrap/dist/js/bootstrap.js line 1509
change
if (!data && _config.toggle && /show|hide/.test(config))
to
if (!data && _config.toggle && /show|hide/.test(_config))
solution2
0 2020-04-13 07:30:56
please check with Bootstrap CDN. if that works then something wrong in your node_modules.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">.
</script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">.
</script>
copy above CDN to index.html <head> tag should work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.