Production build breaks Bootstrap collapse panel close animation

[qbus00]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes - it was working before Angular (I was making an upgrade from 9 to 13 - on Angular 9 it works as intended).

Description

When using production build minification and optimization of bootstrap.js file breaks collapse panel close animation (it simply does not show).

🔬 Minimal Reproduction

Create a new Angular 13 project, install Bootstrap . Make sure that "node_modules/bootstrap/dist/js/bootstrap.bundle.js" or any other bootrap.js file is included in build.scripts of angular.json file.

Create a collapse panel in any method from Bootstrap: https://getbootstrap.com/docs/5.1/components/collapse/

Build app in production mode: "npm run build -- --configuration production"
Run the app. Open and close panel - there will be no closing animation.
When you build app in non production mode everything works as expected.

🌍 Your Environment

Angular CLI: 13.2.1
Node: 14.18.2
Package Manager: npm 8.3.0
OS: darwin arm64

Angular: 13.2.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.1
@angular-devkit/build-angular   13.2.1
@angular-devkit/core            13.2.1
@angular-devkit/schematics      13.2.1
@angular/cli                    13.2.1
@schematics/angular             13.2.1
rxjs                            7.5.2
typescript                      4.5.5
webpack                         5.68.0

[alan-agius4]

I'm sorry, but we can't reproduce the problem following the instructions you provided, I can see the animation both development and production builds. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[qbus00]

I'm sorry, but we can't reproduce the problem following the instructions you provided, I can see the animation both development and production builds. Can you setup a minimal repro please?

Sure, I will try to reproduce that on empty repo and let you know about outcome.
It is not only me who is having this issue. On StackOverflow I found a similar issue:
https://stackoverflow.com/questions/70159067/angular-bootstrap-accordion-animation-is-not-working-on-close-in-production/70927699#70927699

[alan-agius4]

I am still unable to replicate the issue in version 13 using the code in the mentioned SO question.

[qbus00]

I have created an empty project, installed bootstrap, added bootstrap.bundle.min.js to scripts section of angular.json (bundle contains popper.js inside so no need to install that one):
https://github.com/qbus00/angular-bootstrap-collapse-test

If I run server using "ng serve" then everything works perfectly fine (clicking CLICK ME smoothly expands and closes collapse panel with animation) but when I run it using "ng server --configuration production" then opening works also OK, but when you click on "CLICK ME" when panel is expanded then instead of collapsing animation it immedatiely dissapears.

My test configuration is M1 Macbook, tested on Chrome and Safari. I tried to run "ng server" command on MacOs and Linux - both with the same results.