angular - Provide Primeng in standalone component with theme - Stack Overflow

admin管理员组

文章数量:1189003

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-listponent.html',
  styleUrl: './price-listponent.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.

本文标签： angularProvide Primeng in standalone component with themeStack Overflow