Primeng: Modal is not working properly when optimization:true in config of angular app

[shakedSetoo]

I'm submitting a ... (check one with "x")

[ X ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/github/primefaces/primeng-issue-template

Current behavior

When setting angular app to compile with Ivy the dialog box is not behaving as a modal and not centered.

Expected behavior

modal to center on the view.

Minimal reproduction of the problem with instructions

use Angular 9 and change optimization flag to true in angular.json configuration file.

What is the motivation / use case for changing the behavior?

It is a regression - it used to work in version 8
Please tell us about your environment:

Mac

• Angular version: 5.X
  
  Angular 9.1.3
• PrimeNG version: 5.X
  
  9.0.6, 9.05, 9.0.4
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  
  Chrome
• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[diegovannucci]

Same problem. Looks like the classes "ui-dialog-mask" and "ui-dialog-visible" are removed from the parent container

[Phil-DS]

Same problem. Looks like the classes "ui-dialog-mask" and "ui-dialog-visible" are removed from the parent container

I have a similar issue too, but it was down to changing from compiling/serving with 'ng serve' to 'ng serve --prod' on angular.

(Node: 12.1.0, Angular CLI: 9.1.4, Angular: 9.1.4, Browsers: Safari and Chrome, PrimeNG: 9.0.6)

I readded the missing classes, and it worked.

Looking further, the parent container had the following classes missing in the --prod build (The prod build actually had none):

• ui-dialog-mask
• ui-widget-overlay
• ui-dialog-visible
• ui-dialog-mask-scrollblocker

When I manually readied them in a browser to see if it was an issue, they were removed when I dragged the dialog. Could there be some bad logic there?

However, dynamic dialog didn't have this issue when it was tested...

[ghost]

I got the same issue (PrimeNG: 9.0.6). Confirmation Dialog content wrapper is missing the following styles:

• ui-dialog-mask
• ui-widget-overlay
• ui-dialog-visible
• ui-dialog-mask-scrollblocker

[leonetosoft]

Same problem.
ng serve --prod modal display in blocks

[leonetosoft]

Fix using prime 9.0

[scottarver]

I made a repo with the bug, I couldnt get it to work in stackblitz.

https://github.com/scottarver/primeng-modal-issue

found a duplicate issue,
https://github.com/primefaces/primeng/issues/8724

This looks like it has to do with enableProdMode() and optimization:true

[sommcz]

Solved #8724

enableProdMode() not called in custom build with optimization:true

[yigitfindikli]

Unable to replicate with PrimeNG 11.0.0-rc.1, if the issue persists please create a new ticket with a test case reproducing the issue e.g. stackblitz or a github repo and it will be reviewed by our team once again.