0

I have an angular application where I use the Bootstrap 5.3 Javascript module, correctly installed with npm i bootstrap and npm i @types/bootstrap (JQuery and Popper.js were automatically installed as well).

While developing and using the application with ng serve, I am able to import and use the bootstrap modules in my typescript files with no problems or conflicts (creating instances, passing options, accessing methods...).

The problem is that as soon as i build the project (just ng build with no options) the Carousel and Collapse animations start to glitch, animating for example only one of the items of the Carousel or only the "show" and not the "hide" of the Collapse.

Additional information:

Bootstrap even works in the markup, although I never linked bootstrap anywhere with a <script> tag.

About that, I observed that bootstrap "activates" globally when i first import * as bootstrap in the code, but I don't really have evidences to support that theory.

Both the Carousel and the Collapse I am referring to, are used in the markup via the data-bs-* attributes.

If I do link the bootstrap 5.3 Javascript in the <head>, leaving the imports in the typescript files as they are, the Carousel behaviour just go back to normal, while the Collapse glitches in another way (clicking on the button just perform the "show" part and never the "hide").

Does anyone have an idea about why there is such a difference between the serve and the build? Should I instantiate bootstrap components either in the code or in the markup without mixing?

Alberto
  • 1
  • 1

1 Answers1

0

For an Angular application you should really avoid using the default Bootstrap JS and jQuery stuff since that will do direct DOM manipulation which Angular will not know about.

There are some Angular/Boostrap projects you should use instead, and you have options:

Unfortunately you may have to re-write some code in your app to use either one of these, but it truly is a better way going forward to do things "the Angular way" instead of relying n jQuery to make things work

Chris Barr
  • 29,851
  • 23
  • 95
  • 135
  • Thanks for the quick answer. I also tried with the "ng add @ng-bootstrap/ng/bootstrap", but it gave me a bunch of errors about not being able to resolve dependencies and "conflicting peer dependency". I tried to read the log, but I'm not that good at it. Since it seems to be a known problem, do you maybe know anything about it? – Alberto Jul 28 '23 at 14:51
  • Not specifically, no. All I can say is make sure all your packages are up to date first, and then try adding it. It's a good idea to keep them up to date anyway. Also try the other bootstrap library too, maybe it can work better for your project. – Chris Barr Jul 28 '23 at 17:00