cssangularnode-modulesprimeng

PrimeNg 19 styles don't work in Angular 19


I'm developing a project in Angular 19 and I installed PrimeNg 19 but the styles don't work, I imported the theme in my app.config.ts file but still the styles don't work.

Run npm i primeng primeicons @primeng/themes

My app.config.ts file looks like this:

import { ApplicationConfig, provideZoneChangeDetection, isDevMode } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';

import { routes } from './app.routes';
import { provideServiceWorker } from '@angular/service-worker';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Aura
      }
    }),
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes), 
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWhenStable:30000'
    })
  ]
};

My app.component.ts file looks like this:

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PrimeNG } from 'primeng/config';


@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {

  constructor(private primeng: PrimeNG) { }

  ngOnInit() {
    this.primeng.ripple.set(true);
  }
}

I import the module I need from PrimeNg in my component and I put the HTML code, I get the input but without CSS styles, what can be happening?

Screenshot of the input and a test button without styles:

enter image description here


Solution

  • The answer was provided in Yong Shun's comment,

    Can check whether you have provided the appConfig in the bootstrapApplication? bootstrapApplication(/* Starting Component */, appConfig)

    In my case, in bootstrapApplication I had some fixed providers instead of passing by appConfig parameter.