Angular 19集成PrimeNG ButtonModule报错：fn is not a function

问题现象 #

使用Angular 19.0.0和PrimeNG 19.0.0开发时，给独立组件HeaderComponent的imports数组添加ButtonModule就会触发如下错误：

An unhandled exception occurred: fn is not a function
See "C:\Users\GIANNI~1\AppData\Local\Temp\ng-AVgu2w\angular-errors.log" for further details.

仅移除组件中的ButtonModule后，项目即可正常运行。

涉及代码 #

app.config.ts（PrimeNG配置文件） #

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(withEventReplay()),
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Aura,
      },
    }),
  ],
};

HeaderComponent.ts（出错的组件代码） #

import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
@Component({
  selector: 'app-header',
  imports: [ButtonModule],
  templateUrl: './header.component.html',
  styleUrl: './header.component.css',
})
export class HeaderComponent {}

解决办法 #

• 补全主题依赖：PrimeNG 19的Aura主题需要全局正确导入，部分模块依赖主题初始化逻辑，缺失会引发异常。可在全局样式文件（如styles.css）中添加：

  @import "primeng/resources/themes/aura-light-blue/theme.css";
  

• 全局导入ButtonModule：在app.config.ts的providePrimeNG配置中全局注册模块，无需在单个组件中单独导入：

  providePrimeNG({
    theme: {
      preset: Aura,
    },
    imports: [ButtonModule] // 全局注册模块
  }),
  

  之后移除组件中的ButtonModule导入，重新运行项目即可。
• 清理依赖缓存：若因依赖文件损坏导致异常，执行以下命令重置依赖：

  rm -rf node_modules package-lock.json
  npm install
  ng cache clean
  

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