Angular Version : 9.x
Primeng Version : 9.x
We've encountered an issue with PrimeNg elements not rendering correctly in our dev/prod environments, although they work fine in the local environment. After some investigation, we found that the culprit is the 'optimization' flag in the angular.json file. When set to false, styles render properly, but when set to true, it seems that CSS styles are being overridden in those environments resulting in undesired styling.
For example, using the <p-carousel> element from PrimeNg library displays buttons with unexpected styling. Additionally, setting the [modal]=true property on the <p-dialog> element doesn't grey out the background as expected.
We're hesitant to turn off the optimization flag as it increases build sizes. We've tried a few approaches to resolve the issue:
- Experimenting with Angular.json properties.
- Trying different Typescript versions (setting target to ES5 in tsconfig.json)
Correctly rendered Carousel:
https://i.sstatic.net/Wwk7e.png
Incorrectly rendered Carousel (blue arrows/squares):
https://i.sstatic.net/ozB83.png
Why does changing this field impact CSS rendering? Are there alternative solutions besides turning off 'optimization'?