PrimeNG 日历问题

Question

我对PrimenNG有疑问，请看一下这个并尝试给我一些建议，谢谢！ 我的 ts 文件：

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 文件：

<p-calendar></p-calendar>

打包文件：

 "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"
  },

页面运行时，日历不起作用，显示以下错误：

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)

我该如何解决这个问题？谢谢！

Answer 1

请确保您已在 bootstrapApplication 的环境提供者数组中添加了 provideAnimations！

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

我们也不应该在 Angular 应用程序中的任何地方使用浏览器动画模块！