I have a problem configuring bootstrap 5.3.0 in angular 15, popovers, tooltips and toasts no work

Question

Some bootstrap features don't work in my angular project, for example:

Popovers, tooltips & toasts.

I have the following versions of the dependencies installed in my package.json, but Popovers, Tooltips and Toasts do not work for me

"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.0",

I have configured my angular.json with as follows; however, I do not get those options working, on the other hand, when I use the bootstrap.bundle.min.js most of bootstrap functionalities work, except the ones I commented.

This is my angular.json file:

"inlineStyleLanguage": "scss",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
   "node_modules/bootstrap/scss/bootstrap.scss",
   "src/styles.scss",
   "node_modules/normalize.css/normalize.css",
   "node_modules/ngx-toastr/toastr.css"
],
"scripts": [
   "node_modules/@popperjs/core/dist/umd/popper.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.js"
]

I also added the following script in the index.html and in the corresponding component where I use the popover, but it didn't work

<script>
    const tooltipTriggerList = document.querySelectorAll(
        '[data-bs-toggle="tooltip"]'
    );
    const tooltipList = [...tooltipTriggerList].map(
        (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
    );

    const popoverTriggerList = document.querySelectorAll(
        '[data-bs-toggle="popover"]'
    );
    const popoverList = [...popoverTriggerList].map(
        (popoverTriggerEl) => new bootstrap.Popover(popoverTriggerEl)
    );
</script>

I would very much appreciate an explanation of how I could fix it.

Answer 1

Add following code at the top of your component calss.

declare var bootstrap: any;

Update tsconfig.json with following code.

"compilerOptions": { 
    "lib": ["ES2022", "dom", "dom.iterable"]
}