Events not working for Production builds

[alexgoldstone]

Angular CLI: 6.2.2
Node: 8.11.3
OS: darwin x64
Angular: 6.1.1
Browser: Google Chromer Version 68.0.3440.106 (Official Build) (64-bit)

My <plotly-plot> component contains the following:

(hover)="handleHover($event)" (unhover)="handleUnhover($event)"

handleHover and handleUnhover simply console log the event.

If I run a development build using ng serve then everything functions correctly so it seems that in principle my code is fine.

If I create a production build using ng build --prod then the charts are still rendered correctly but my handleHover and handleUnhover functions do not get called and instead I see the following in the browser console:

main.f138b76c7351710df66b.js:1 ERROR TypeError: Cannot read property 'call' of undefined
    at main.f138b76c7351710df66b.js:1
    at a.emit (main.f138b76c7351710df66b.js:1)
    at HTMLDivElement.t.emit (main.f138b76c7351710df66b.js:1)
    at main.f138b76c7351710df66b.js:1
    at main.f138b76c7351710df66b.js:1
    at l (main.f138b76c7351710df66b.js:1)
    at Object.n.throttle (main.f138b76c7351710df66b.js:1)
    at Object.n.hover (main.f138b76c7351710df66b.js:1)
    at SVGRectElement.c.onmousemove [as __zone_symbol__ON_PROPERTYmousemove] (main.f138b76c7351710df66b.js:1)
    at SVGRectElement.S (polyfills.7a0e6866a34e280f48e7.js:1)
le @ main.f138b76c7351710df66b.js:1
t.handleError @ main.f138b76c7351710df66b.js:1
next @ main.f138b76c7351710df66b.js:1
e.object.i @ main.f138b76c7351710df66b.js:1
e.__tryOrUnsub @ main.f138b76c7351710df66b.js:1
e.next @ main.f138b76c7351710df66b.js:1
e._next @ main.f138b76c7351710df66b.js:1
e.next @ main.f138b76c7351710df66b.js:1
e.next @ main.f138b76c7351710df66b.js:1
e.emit @ main.f138b76c7351710df66b.js:1
(anonymous) @ main.f138b76c7351710df66b.js:1
e.invoke @ polyfills.7a0e6866a34e280f48e7.js:1
t.run @ polyfills.7a0e6866a34e280f48e7.js:1
t.runOutsideAngular @ main.f138b76c7351710df66b.js:1
onHandleError @ main.f138b76c7351710df66b.js:1
e.handleError @ polyfills.7a0e6866a34e280f48e7.js:1
t.runTask @ polyfills.7a0e6866a34e280f48e7.js:1
t.invokeTask @ polyfills.7a0e6866a34e280f48e7.js:1
_ @ polyfills.7a0e6866a34e280f48e7.js:1
m @ polyfills.7a0e6866a34e280f48e7.js:1

[andrefarzat]

@alexgoldstone I followed what you explained and could got the same error. It happens only with ng build --prod. Running as ng build is ok, therefore it looks like an issue with ng command itself.
Looking into it I could find the issue might be related to Uglifyjs and ES2015.
Please check this link: angular/angular-cli#11129

Gonna close it, but if it persists, feel free to return and reopen the discussion 😸

[alexgoldstone]

@andrefarzat Thank you for directing me to the link suggesting this is an issue with the Angular build tools. I did search before reporting here but did not find this myself.

For anyone experiencing the same issue, I am able to confirm that the events work when the production build is crated using:

ng build --prod --optimization=false

Unfortunately this increases my build size by > 30% but at least it works and can be re-optimized later.

[meiXXI]

...same here. I got the same error. Thank you for posting this bug and providing a workaround!

[thre3eye]

Same here using an OHLC plot when trying to manipulate the range slider in prod mode.
It doesn't happen with --optimization=false

Can this be re-opened so the devs are aware please?

[Nordnat]

Best solution for me was using --build-optimizer=false. Additionally I have added --vendor-chunk to separate vendors part for better caching

[hpardess]

I faced similar error when I run following command ng build --prod --source-map

ERROR TypeError: Cannot read property 'call' of undefined
    at plotly.min.js:7
    at a.emit (plotly.min.js:7)
    at HTMLDivElement.t.emit (plotly.min.js:7)
    at Object.g.plotAutoSize (plotly.min.js:7)
    at U (plotly.min.js:7)
    at V (plotly.min.js:7)
    at Object.t [as relayout] (plotly.min.js:7)
    at t.updateChartDimensions (plotly-chart.component.ts:68)
    at m (lodash.js.pre-build-optimizer.js:10335)
    at y (lodash.js.pre-build-optimizer.js:10384)

[andrefarzat]

@hpardess looks like it is a problem with angular minifier/optimizer with plotly.js already minified. Please, try using plotly via CDN or adding it before the angular code. This way your angular code and plotly.js code will be separated

[infrarosso78]

FYI: it looks like it is fixed now (with version 1.2).

[thre3eye]

Actually... FYI - 1.2 doesn't work for me at all. The application referencing plotly and angular-plotly 1.2 just shows a blank screen before even drawing charts. Works fine rolling back to 1.1. Sorry, don't see errors to report besides nothing rendering and do not have time to dig into details for now :(

[andrefarzat]

@enalposi so please, return here once you have a concrete example and reopen this issue if necessary 😺

[thre3eye]

Hi - FYI, just checked 1.3 and same issue. However, I caught an error in the log this time and it mentioned it's not initialized correctly with a link for what to do. Noticed a missing assignment "PlotlyModule.plotlyjs = PlotlyJS;" which didn't bother 1.1 but adding it per instructions fixed 1.3. Thanks guys!