No animation on ngbCollapse in Angular 11.1 in production build

[4javier]

Bug description:

Since upgrade to Angular 11.1, ngbCollapse elements get no animation when built for production (ng build --prod).
Other directives like ngbTooltip work as usual.
Animation works regular in dev build even for ngbCollapse.

Link to minimally-working StackBlitz that reproduces the issue:

Don't know how to issue a production build on StackBlitz

Versions of Angular, ng-bootstrap and Bootstrap:

Angular 11.1.0
ng-bootstrap 9.0.2

[maxokorokov]

We'll need the reproduction scenario please. Demo site works fine.
I understand that StackBlitz runs dev mode, but we'll need something we can clone and run to reproduce: ex. github repo
Or at the very least instructions to reproduce from an empty CLI project.

Please take a look at the Getting Help section in documentation and use the appropriate support channel.

If you believe you've found a bug in this library then please:

• fill in the issue template correctly
• provide a minimal reproduction scenario in a StackBlitz

[4javier]

@maxokorokov
I think I narrowed down the problem:
the issue arises when you import the standalone NgbCollapseModule instead of the whole NgbModule.
Considered the simplicty of repro, I avoid to link to you a repo just for this.

[4javier]

Trying to debug a little, I find out that after optimization the value of ngbCollapsingTransition at this line results undefined

ng-bootstrap/src/collapse/collapse.ts

Lines 78 to 83 in 74d3109

	private _runTransition(collapsed: boolean, animation: boolean) {
	return ngbRunTransition(
	this._zone, this._element.nativeElement, ngbCollapsingTransition,
	{animation, runningTransition: 'stop', context: {direction: collapsed ? 'hide' : 'show'}});
	}

Hope it helps.

[maxokorokov]

Ok, this is caused by the Terser pure_getters optimization.

We have a reflow function:

export function reflow(element: HTMLElement) {
  return (element || document.body).offsetHeight;
}

In case of using ONLY NgbCollapseModule it is used only once and is inlined.

// not inlined, if reflow is used in several places
classList.remove("collapse"),
classList.remove("collapsing"),
classList.remove("show"),
reflow(element),
classList.add("collapsing"),

// inlined, if used only once
classList.remove("collapse"),
classList.remove("collapsing"),
classList.remove("show"),
function(element) {
    element || document
}(element),
classList.add("collapsing"),

See angular/angular-cli#15761 for more details.

On our side I'll fix it by using .getBoundingClientRect() instead of .offsetHeight