Compatibility Issue: Using PrimeNG 19 with Angular 19 without Full Redesign or Token Overhaul

[swami-sanapathi]

Problem: We are working on an enterprise application and have recently upgraded to Angular 19. However, we are encountering compatibility issues when trying to use PrimeNG 19 in this environment. Specifically, we do not want to go through the time-consuming process of redefining design tokens from scratch, as this could take several months for our organization.

Desired Solution: We are looking for a solution or workaround that allows us to use PrimeNG 19 in Angular 19 while maintaining the old method of overriding default PrimeNG styles and classes. Ideally, we would like a way to avoid needing to implement the full design token overhaul. Any guidance on how to make this transition smoother would be greatly appreciated, especially if there are simpler ways to override or customize PrimeNG’s default classes without a complete redesign.

Context:

• Angular version: 19
• PrimeNG version: 19
• Objective: Use PrimeNG in Angular 19 with minimal disruption and without redefining tokens from scratch.

Possible Workarounds Sought:

• Overriding default PrimeNG classes with custom CSS
• Using Angular's styling capabilities to integrate with PrimeNG while bypassing token requirements
• Suggestions for partial token customization that can accelerate the process

Any assistance or suggestions on how to integrate PrimeNG 19 into Angular 19 without a full redesign would be extremely helpful. Thank you!

[swami-sanapathi]

@cetincakiroglu @cagataycivici Could you please assist us in finding a backward-compatible solution?

[puschie286]

We faced the same problem and solved it by using css layers.

You need to configure it within the PimeNGConfig (docu). Here is our cssLayer config:

cssLayer: {
	name: 'primeng',
	order: 'properties, theme, base, primeng, components, utilities'
}

With this, you can simply put all overrides into a @layer components