webgl not supported

[danielfrunza]

WARN: webgl setup failed possibly due to enabling preserveDrawingBuffer config. The device may not be supported by is-mobile module! Inverting preserveDrawingBuffer option in second attempt to create webgl scene.

The above message is displayed despite that my browser supports WebGL as here

The environment:
Angular: 9.0.7
PlotlyJS: 1.54.5
Chrome: Version 83.0.4103.116 (Official Build) (64-bit)

Steps to reproduce:

1. create an angular 9 project
2. npm install plotly.js
3. add plotly.min.js in scripts in angular.json:
   "scripts": [ "node_modules/plotly.js/dist/plotly.min.js" ]
4. create an angular component and add a 3D surface plot from docs
5. ng serve --prod

When using the --prod from angular compiler, I think that the already minified plotly.min.js gets bundled and minified in a wrong way. If the angular app is served or build without the '--prod' option everything works as expected.

PS: The last version of Plotly that is still working with --prod flag is 1.41.3

SS without --prod

SS with --prod

[archmoj]

@danielfrunza Which browser & OS are you using?

It may be related to gl-vis/gl-plot3d#11 of v1.42.0.

To investigate, you could use dist/plotly.js and add

console.log({
  opts: opts.glOptions, 
  glplot: scene.glplot
});

here:

plotly.js/src/plots/gl3d/scene.js

Line 153 in 7a274ed

// invert preserveDrawingBuffer setup which could be resulted from is-mobile not detecting the right device

[danielfrunza]

@danielfrunza Which browser & OS are you using?

Chrome: Version 83.0.4103.116 (Official Build) (64-bit)
Windows 10

[archmoj]

@danielfrunza Which browser & OS are you using?

Chrome: Version 83.0.4103.116 (Official Build) (64-bit)
Windows 10

@danielfrunza and this demo works?

[danielfrunza]

if I replace:
angular.json:
"scripts": [ "node_modules/plotly.js/dist/plotly.min.js" ]

with:
angular.json:
"scripts": [ "node_modules/plotly.js/dist/plotly.js" ]

It works fine! Thanks for advice

[archmoj]

if I replace:
angular.json:
"scripts": [ "node_modules/plotly.js/dist/plotly.min.js" ]

with:
angular.json:
"scripts": [ "node_modules/plotly.js/dist/plotly.js" ]

It works fine! Thanks for advice

@danielfrunza wanna close this issue?