21: Unable to use `NzModalService.create`

[cipchk]

Reproduction example: StackBlitz.

It appears that certain essential logic in the modal relies on the animationend event. However, this dependency is unreliable—especially since animation-related code seems to assume animationend will always fire, which isn't guaranteed in all environments or scenarios.

For robustness, the implementation should also account for animationcancel and handle cases where animations fail or are disabled (e.g., due to user preferences like prefers-reduced-motion).

As a result of this issue, the afterOpen and afterClose callbacks do not fire as expected, breaking downstream functionality that depends on them.

[ycoe]

+1

[Nicoss54]

@Laffery it seems migrated the animation in the modal create some bugs

[Laffery]

@cipchk The issue with creating modal was due to antZoom keyframes not being bundled into the default CSS file. We've already solved this in #9653; you can review it if you'd like.

Currently, some components rely on animationend or transitionend, which, as you mentioned, does have some shortcomings. We welcome PR contributions to help us make it much more robust :)

[drucinsky]

I am experiencing the exact same issue. Is this related to the modal.close() method?

After upgrading to NG-ZORRO v21, I am getting an Error: Node cannot be null or undefined during the modal closing animation. In my case, this happens exclusively on Firefox.

Steps to reproduce in my scenario:

• Open a modal.
• Toggle an nz-switch inside the modal (this dynamically adds or removes components inside the modal using @if / *ngIf).
• Immediately close the modal programmatically via modal.close().

Root cause observation:
The error is thrown in the _startLeaveAnimation method inside ng-zorro-antd-modal.mjs. Because the internal DOM is mutating (due to the switch toggle) right as the modal is instructed to close, Angular triggers a change detection cycle (recreateView). This seems to tear down the modal's DOM elements prematurely.

By the time NG-ZORRO attempts to attach the animationend listener to this.modalElementRef.nativeElement, the element evaluates to undefined. Firefox handles these animation lifecycle events much more strictly than Chrome, which leads to the crash.

Here is the stack trace:

ERROR Error: Node cannot be null or undefined
    Angular 20
[_effect-chunk2.mjs:2601:19]
    Angular 6
    RxJS 6
    Angular 21
    _startLeaveAnimation ng-zorro-antd-modal.mjs:782
    close ng-zorro-antd-modal.mjs:1499
    close modal-base.service.ts:50
    RxJS 40
    close modal-base.service.ts:48
    closeModal comment-modal.component.ts:134
    CommentModalComponent_div_0_Template_button_click_11_listener comment-modal.component.html:12
    Angular 28
    CommentModalComponent_div_0_Template comment-modal.component.html:12
    Angular 5
    recreateView ng-zorro-antd-core-outlet.mjs:22
    ngOnChanges ng-zorro-antd-core-outlet.mjs:69
    Angular 7

And the exact place where it fails in the NG-ZORRO source code:

 _startLeaveAnimation(callback) {
    this.animationStateChanged.emit('leave-start');
    if (this.animationDisabled()) {
      this.restoreFocus();
      callback?.();
      this.animationStateChanged.emit('leave-active');
    } else {
      this.setExitAnimationClass();
      const element = this.modalElementRef.nativeElement;
      const onAnimationEnd = () => {
        element.removeEventListener('animationend', onAnimationEnd);
        this.restoreFocus();
        this.cleanAnimationClass();
        callback?.();
        this.animationStateChanged.emit('leave-active');
      };
      element.addEventListener('animationend', onAnimationEnd); // <-- ERROR HERE: element is undefined
    }
  }

Hope this context helps in providing a solid fix!