Angular 4 animation not triggered, "ng-animate-queued" class added to element

Question

I have used an angular animation (fade-in, fade-out) on a modal component in my project.
The modal is set to open when clicking on a button somewhere else on a different component (using a modal service).
The animation code in the component which hosts the modal component:

animations: [
    trigger('modalVisibilityChanged', [
      state(
       'shown',
        style({
          opacity: 1,
          visibility: 'visible'
        })
      ),
      state(
        'hidden',
         style({
          opacity: 0,
          visibility: 'hidden'
        })
      ),
      transition('shown => hidden', animate('500ms ease-in')),
      transition('hidden => shown', animate('500ms ease-out'))
    ])]

And the html:

<app-modal [@modalVisibilityChanged]="visibility"></app-modal>

This animation worked perfectly until I've set the modal content to be loaded and inserted into the modal component dynamically (using ng-template in the modal's component html).

After that the animation no longer works (the relevant css properties don't change when clicking on the button) and the modal components div gets the class "ng-animate-queued" when inspected using Google Chrome.
This is how it looks:


Can anyone help me solve the problem, or share what is the cause?

Thanks!

Answer 1

Check if there are any angular console errors when you open your modal.

I encountered the same issue in my modal where there is a slider animation. Issue happens intermittently. I finally able to notice that a separate console error also happens intermittently, and it happens the same time when the animation goes "ng-animate-queued". Fixed the console error and the animation error did not occur anymore.

--Update-- This might be related to this bug. https://github.com/angular/angular/issues/19093

Answer 2

Posting this here for whoever is still struggling with this problem or similar to this.

Questions:

1. Are you lazy loading the module that declares the dynamic component?
2. Are you importing BrowserAnimationsModule and BrowserModule inside that lazy loaded module?

If yes on both, try removing those imports. It might be that the app is loading Browser/AnimationsModule twice which should throw an error but angular "zone" was not able to detect them.

I just solved this same issue in my angular12 app that implements microfrontend architecture using module federation. The component which is hosted on a separate site was loading on the host site but the animations were not working. I was also seeing ng-animate-queue class. After a couple of days of countless trials and errors, I tried to configure the webpack to share @angular/platform-browser/animations library. Then it showed this error which basically tells how to fix it:

ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

So I removed the BrowserAnimationsModule from the remote module that was being lazy loaded and then it worked!