My Angular project is utilizing Bootstrap 4.6.2. One of the components features a table with ngb-accordion, which was functioning properly until I upgraded the project to Angular 13. Upon accessing the page containing the accordion in Angular 13, I encounter the following error in the console. Although it doesn't impede navigation or the functionality of opening/closing the accordion, I would like to resolve this persistent error message:
Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '#4bdecde7-0564-475c-a160-655206d24c9e' is not a valid selector.
at t._getPanelElement (http://localhost:4200/main.js:1:347916)
at http://localhost:4200/main.js:1:346729
at Array.forEach (<anonymous>)
at qf.forEach (http://localhost:4200/main.js:1:91610)
at Nt._next (http://localhost:4200/main.js:1:346704)
at Nt.__tryOrUnsub (http://localhost:4200/main.js:1:5045)
at Nt.next (http://localhost:4200/main.js:1:4286)
at ae._next (http://localhost:4200/main.js:1:3479)
at lP._next (http://localhost:4200/main.js:1:181212)
I suspect this issue may be related to the Bootstrap version, but I'm unsure how to address it. Below is an excerpt from my package.json for context:
"dependencies": {
"@angular/animations": "^13.4.0",
"@angular/common": "~13.4.0",
"@angular/compiler": "~13.4.0",
"@angular/core": "~13.4.0",
…
Your assistance in resolving this issue would be greatly appreciated!