Provide Primeng in standalone component with theme

trying to minimize initial bundle of my web app with angular v19, primeng. when providing primeng in app.config.ts like this:

export const appConfig: ApplicationConfig = {
providers: [
provideAnimationsAsync(),
providePrimeNG({
theme: {
preset: Aura
}
})
]
};


all styles of primeng is included in root(initial) styles.css file, which will be bigger styles file and that affects my initial loading time. In my case I don't want that, I am using primeng only in one standalone component, let's say PriceComponent, which is lazy loaded component. That is why I want to provide and utilize primeng things in PriceComponent only, not globally. Is there a way to remove providePrimeNG from app.config.ts and provide same thing in PriceComponent only?

What I did so far:

@Component({
selector: 'app-price-list',
imports: [
TabsModule,
CommonModule
],
providers: [
{ provide: PRIME_NG_CONFIG, useValue: { theme: Aura } },
],
templateUrl: './price-list.component.html',
styleUrl: './price-list.component.scss',

schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class PriceListComponent implements OnInit, AfterViewInit {


which did not work. Does anyone have suggestions about how to achieve this? Thanks in advance for your time.

Continue reading...