PrimeNG Calendar Issue

Question

I have a problem with PrimenNG, please take a look at this and try to give me some suggestions, thanks! My ts file:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CalendarModule } from 'primeng/calendar';

@Component({
  selector: 'app-text-field',
  standalone: true,
  imports: [CommonModule,CalendarModule],
  templateUrl: './text-field.component.html',
  styleUrl: './text-field.component.css'
})
export class TextFieldComponent {

}

Html file:

<p-calendar></p-calendar>

Package file:

 "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "primeng": "^17.3.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },

When the page runs, the calendar doesn't work, it shows the error below:

ERROR Error: NG05105: Unexpected synthetic listener @overlayAnimation.start found. Please make sure that:
  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
  - There is corresponding configuration for the animation named `@overlayAnimation.start` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).
    at checkNoSyntheticProp (platform-browser.mjs:762:11)
    at NoneEncapsulationDomRenderer.listen (platform-browser.mjs:726:86)
    at listenerInternal (core.mjs:24549:40)
    at ɵɵlistener (core.mjs:24430:5)
    at Calendar_div_3_Template (primeng-calendar.mjs:1287:8)
    at executeTemplate (core.mjs:12154:9)
    at renderView (core.mjs:15272:13)
    at createAndRenderEmbeddedLView (core.mjs:19737:5)
    at TemplateRef2.createEmbeddedViewImpl (core.mjs:28018:31)
    at ViewContainerRef2.createEmbeddedView (core.mjs:19901:37)

How can I solve the issue? Thanks!

Answer 1

Please make sure you have added provideAnimations in the environment providers array of bootstrapApplication!

import { provideAnimations } from '@angular/platform-browser/animations';
...
bootstrapApplication(App, {
  providers: [
    ...
    provideAnimations(),
    ...
  ]
});

We also should not have browser animation module anywhere in the angular application!