primeng - Error on adding Prime NG button module to my Angular 19 project (An unhandled exception occurred: fn is not a function

admin管理员组

文章数量:1288075

I am using Angular 19.0.0 and Prime NG 19.0.0, when I add button module on my imports array on my header standalone component I get this error : 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.

Only if I remove ButtonModule from my component its working fine.

I try to import ButtonModule on my standalone component : imports: [ButtonModule],

This is my app.config.ts file where I set to use PrimeNG :

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

And bellow is my header component where I want to use the button. And by just import it to header ts file I get the error : TypeError: fn is not a function

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

I am using Angular 19.0.0 and Prime NG 19.0.0, when I add button module on my imports array on my header standalone component I get this error : 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.

Only if I remove ButtonModule from my component its working fine.

I try to import ButtonModule on my standalone component : imports: [ButtonModule],

This is my app.config.ts file where I set to use PrimeNG :

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

And bellow is my header component where I want to use the button. And by just import it to header ts file I get the error : TypeError: fn is not a function

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

• primeng
• angular19

Share Improve this question Follow asked Feb 22 at 16:14 Paris SakkoulasParis Sakkoulas 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I did some research and found that the issue was likely due to version conflicts. To resolve it, I uninstalled Angular and reinstalled it globally. Now, everything is working fine.

本文标签：