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:
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.