PrimeNG Calendar组件无法运行，报NG05105错误求助

使用PrimeNG 17.3.3的Calendar组件时，页面运行出现NG05105错误，组件无法正常工作，以下是相关代码、错误信息及解决方案：

相关代码 #

组件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)

解决方案 #

PrimeNG组件依赖Angular动画模块，错误提示已明确指出需导入BrowserAnimationsModule或NoopAnimationsModule。由于使用Angular 17独立组件，需在组件的imports数组中添加对应模块：

方法1：启用动画（推荐） #

修改组件TS文件，导入并添加BrowserAnimationsModule：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CalendarModule } from 'primeng/calendar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

}

方法2：禁用动画 #

若无需动画效果，可导入NoopAnimationsModule替代：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CalendarModule } from 'primeng/calendar';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

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

}

也可在根组件或应用配置中全局导入动画模块，避免重复导入。

内容的提问来源于stack exchange，提问作者Ray