Dropdown: requires import of BrowserAnimationsModule, which prevents Angular application from loading

[kponichtera]

Describe the bug

Trying to open the PrimeNG dropdown fails and the following error is displayed in the console:

ERROR Error: NG05105: Unexpected synthetic listener @overlayContentAnimation.start found. Please make sure that:
  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
  - There is corresponding configuration for the animation named `@overlayContentAnimation.start` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).
    Angular 5
        RuntimeError
        checkNoSyntheticProp
        listen
        listenerInternal
        listener
core.mjs:7473:22

However, importing BrowserModule and BrowserAnimationsModule (or NoopAnimationsModule) in the root module as described in https://primeng.org/installation#animations, prevents the application from loading (even though it compiles successfully), with the following error in the console:

ERROR Error: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
    Angular 53
    <anonymous> main.ts:5
core.mjs:7473:22

According to Angular documentation (https://angular.io/api/platform-browser/BrowserModule) the BrowserModule is now loaded by default for the applications, generated with the CLI. However, PrimeNG documentation does not provide information on configuring animations in the latest Angular versions, where the module is being automatically loaded. As a result, the Dropdown component is unusable.

Environment

Linux 6.7.5-arch1-1 #1 SMP PREEMPT_DYNAMIC Sat, 17 Feb 2024 14:02:33 +0000 x86_64 GNU/Linux

Reproducer

https://stackblitz.com/edit/stackblitz-starters-apxsx8?file=src%2Fmain.ts

Angular version

17.1.0

PrimeNG version

17.7.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.0

Browser(s)

No response

Steps to reproduce the behavior

1. Create a new Angular project with the CLI (with default options)
2. Add PrimeNG by following the installation guide (https://primeng.org/installation)
3. Add a dropdown module and dropdown components to the main component of the application
4. Serve the Angular application and try to open the dropdown - there should be an error in the console
5. Import BrowserModule and BrowserAnimationModule as described in the error and PrimeNG installation guide
6. After compiling, the web application should not start anymore, and there should be an error in the console

Expected behavior

The dropdown should open without error in the console. It also shouldn't require importing BrowserModule and BrowserAnimationModule anymore. Alternatively, if that's not the case, the documentation should mention how to make the dropdown work as expected.

[manuelhumanescabrera]

Hi, i solved it using the provideAnimations function in the application config.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations()]
};

If you see the function's documentation you will see that this function is for enable the animations in applications created with the function bootstrapApplication. I hope you find it helpful :)

[kponichtera]

Big thanks @manuelhumanescabrera, it works as expected now! 🙏 I guess it's just PrimeNG documentation that needs updating, to account for changes in the newer Angular versions. I will create a separate issue for that later.

[bazzebazz]

@manuelhumanescabrera Genius! Saved my project♥ Thxs

[IsakkuHN]

Hi, i solved it using the provideAnimations function in the application config.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations()]
};

If you see the function's documentation you will see that this function is for enable the animations in applications created with the function bootstrapApplication. I hope you find it helpful :)

U saved me <3

[Kirollosangly]

thank you @manuelhumanescabrera

[Mavi46]

@manuelhumanescabrera Thanks!

[stealthoust]

@manuelhumanescabrera God bless you! I struggled with this problem for 2 days

[cronus712]

it works thanks !

[JansthcirlU]

Why doesn't this just work when CommonModule is imported by default?

[METACEO]

thanks @manuelhumanescabrera - it's be great if this error message could also include info for those of us using standalone components

also - please let me know how I can buy you a coffee or beer :)

[Chrinox]

Awesome, thank you so much @manuelhumanescabrera.

[EricNeves]

Amazing, thanks manuelhumanescabrera

[wardvisual]

Hi, i solved it using the provideAnimations function in the application config.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations()]
};

If you see the function's documentation you will see that this function is for enable the animations in applications created with the function bootstrapApplication. I hope you find it helpful :)

This works perfectly on my end. Thanks for sharing, @manuelhumanescabrera!

[iuliancazan]

Thank you, it works for me too!

[martin-samouiller]

Thanks!!

[vbkalmane22]

Hi, i solved it using the provideAnimations function in the application config.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations()]
};

If you see the function's documentation you will see that this function is for enable the animations in applications created with the function bootstrapApplication. I hope you find it helpful :)

You are amazing !!!