why my popovers from bootstrap 5 return a Uncaught TypeError?

You are using the beta version of bootstrap 5 which doesn't require jQuery and uses its own javascript file.

To initialize bootstrap's js you have to use bs.

Replace:

• data-toggle to data-bs-toggle
• data-placement to data-bs-placement
• data-content to data-bs-content

Your code:

<button type="button" class="btn btn-secondary popoverable" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>

Updated Code:

<button type="button" class="my-5 d-block btn btn-secondary popoverable" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>

This is a bit old, but I just ran into this and figured it out so I thought I'd share for posterity.

Turns out this happens when you call new bootstrap.Popover before the element is on the page. It doesn't work for "future" elements to be rendered on the page, which in your case I believe must happen through Angular in your <app-root> element. When the <script> tag executes, there is no .popoverable in the DOM.

In my case, I had to make sure to defer Popover's initialization til after DOMContentLoaded.

document.addEventListener("DOMContentLoaded", function (event) {
  let popoverTriggerList = [].slice.call(
    document.querySelectorAll('.popoverable')
  );
  let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl);
  });
});

In your case, you would have to make it happen after the app-component has been rendered into the DOM (I'm not familiar enough with Angular to tell you where that would be, but you'd need to hook into the initialization life-cycle of the component, and perhaps also make sure to "disconnect" the Popover if/when the app-component gets unloaded in order to avoid memory leaks).