Primeng: dialog is not visible in production

[benjamindobravec]

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

Current behavior
Dialog (p-dialog) is not visible when project is build for production (ng build --prod).

Expected behavior
Dialog should be visible.

Minimal reproduction of the problem with instructions
Build PrimeNG 9.0.5 for production to reproduce this bug.
p-dialog first child div build for production does not have same classes as build for develop.

classes in develop:
ng-tns-c94-10 ng-star-inserted ui-dialog-mask ui-widget-overlay ui-dialog-visible ui-dialog-mask-scrollblocker

classes in production;
ng-tns-c38-7 ng-star-inserted

dialog properties
<p-dialog [(visible)]="visible" [modal]="true" [draggable]="false" [resizable]="false" (onHide)="onHide()" [focusOnShow]="false" [style]="{width:'50vw'}" [transitionOptions]="'0ms'" appendTo="body">

What is the motivation / use case for changing the behavior?
We want to show dialog.

Please tell us about your environment:
Windows 10, VS Code but should be reproducible in all environments

• Angular version: 9.1.0

• PrimeNG version: 9.0.5

• 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 ]

• Language: TypeScript 3.8.3

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

[tibinvpaul]

I am also facing this issue. It works when I build with ng serve though.

[neslob]

Facing the issue, too.

The optimization seems to break it. Switching it off "optimization": false builds working code.

So ng build --prod --optimization=false also works, but creates huge files.

Workaround:
add the missing classes to the dialog.

<p-dialog
  [modal]="true"
  [style]="{ width: '60vw' }"
  [baseZIndex]="10000"
  maskStyleClass="ui-dialog-mask ui-widget-overlay ui-dialog-visible ui-dialog-mask-scrollblocker"
>

[dloprodu]

I have the same issue.

Angular version: 9.0.7
PrimeNG version: 9.0.5
TypeScript version: 3.7.5

[subhamsaha]

Same issue. Dialog position is not centered on screen. Grayed background is missing. css classes ui-widget-overlay ui-dialog-mask are missing from generated html.

[yuri1969]

I can confirm this issue is still present using the latest PrimeNG 9.0.6.

Angular: 9.1.2
TypeScript: 3.8.3

[mertsincan]

Interesting! I couldn't replicate it with production build(ng build --prod). Could you please attach a runnable sample project for us to replicate? You can use https://github.com/primefaces/primeng-issue-template or https://github.com/primefaces/primeng-quickstart-cli for the sample.

[yuri1969]

@mertsincan Neither could I using the sample projects of yours. I thought the problem might be related to using the Dialog in dynamic modules but I couldn't replicate that even under the latest Angular, Angular CLI and module set to ESNext.

My affected project got over 40 components which span a few modules. So do you happen to have an idea/hunch where to start digging?

[saillemuin]

We have the same problem, latest Angular / PrimeNG, big project.

[cagataycivici]

Live is also on prod mode, without a sample repo that helps us to replicate, we're unable to assist.

https://primefaces.org/primeng/showcase/#/dialog

[yuri1969]

Just a minor observation: when one doesn't set appendTo="body" the Dialog gets misplaced but visible.

[ilDiavolo]

check that the production variable has true value in enviroment.prod

[benjamindobravec]

Live is also on prod mode, without a sample repo that helps us to replicate, we're unable to assist.

https://primefaces.org/primeng/showcase/#/dialog

@cagataycivici PrimeNG: 9.0.6 dialog is working, enableProdMode() must be called when project is build for production ng build --prod.

Problem was that environment.production variable was set to _false_ and enableProdMode() was not called.

main.ts

if (environment.production) {
  enableProdMode();
}

[dloprodu]

After fix the enviroment.prod for production the dialog works fine.

[yuri1969]

A call to enableProdMode() fixes the issue.

It's easy to overlook this call when you deal with custom environments featuring "optimization": true.

[saillemuin]

Great work ! Also solved here, thanks all.

[neslob]

Facing the issue, too.

The optimization seems to break it. Switching it off "optimization": false builds working code.

So ng build --prod --optimization=false also works, but creates huge files.

Workaround:
add the missing classes to the dialog.

<p-dialog
  [modal]="true"
  [style]="{ width: '60vw' }"
  [baseZIndex]="10000"
  maskStyleClass="ui-dialog-mask ui-widget-overlay ui-dialog-visible ui-dialog-mask-scrollblocker"
>

During updating from 9 to 11 , I saw my note on this issue. For me it is fixed in 11.