**Angular Version : 9.x**

**Primeng Version : 9.x**

I have been having problems with PrimeNg elements rendering incorrectly on our dev/prod environments, however, these elements do render correctly in the local environment. I have isolated the problem down to the 'optimization' flag in the angular.json file. When this flag is set to false, the styles render as expected. However, when the flag is set to true, it appears that some CSS styles are overridden in those environments leading to unwanted styling.

For instance, when using the `<p-carousel>` element from PrimeNg library this element renders the buttons with unexpected styling. Furthermore, when setting the `[modal]=true` property to true on the `<p-dialog>` element it does not perform its expected behavior of graying out the background.

I am trying to avoid setting the optimization flag to false because it is increasing the build sizes.

Approaches taken to solve thus far:

1. Experimenting with Angular.json properties.
2. Trying different Typescript version (set target to ES5 in tsconfig.json)

Carousel correctly rendering:

[![Correct rendering](https://i.stack.imgur.com/Wwk7e.png)](https://i.stack.imgur.com/Wwk7e.png)

Carousel incorrectly rendering (notice blue arrows/squares):

[![Incorrect rendering](https://i.stack.imgur.com/ozB83.png)](https://i.stack.imgur.com/ozB83.png)

Why does setting this field affect the way the CSS is rendered? Is there some other fix that was overlooked that I can use other than setting 'optimization' to false?