TypeError: Cannot read property 'forExport' of undefined

[tjdavis1111]

Software:

• Angular 9.1.1
• Angular Router 9.1.1
• Highcharts 8.1.2
• Highcharts-Angular 2.8.0

Scenario:
My website uses Angular Routing to switch between components that use the Highcharts-Angular wrapper to surface Highcharts. The charts render with no problem. However, when the chart's data changes because of a change in the filter, I need to destroy the chart so as to rerender the charts on the page. The following code is used:

rerender() {
this.chart.destroy();
const c = new Highcharts.Chart(this.chartOptions2);
this.chart = c;
}

The charts rerender with no problem. Unfortunately, when I switch to another "routed" page, I receive the following error:

core.js:4127 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'forExport' of undefined
TypeError: Cannot read property 'forExport' of undefined
at v.destroy (highmaps.js:337)
at HighchartsChartComponent.push../node_modules/highcharts-angular/ivy_ngcc/fesm5/highcharts-angular.js.HighchartsChartComponent.ngOnDestroy (highcharts-angular.js:46)
at executeOnDestroys (core.js:9536)
at cleanUpView (core.js:9458)
at destroyViewTree (core.js:9253)
at destroyLView (core.js:9411)
at RootViewRef.push../node_modules/@angular/core/ivy_ngcc/fesm5/core.js.ViewRef.destroy (core.js:10153)
at ComponentRef.push../node_modules/@angular/core/ivy_ngcc/fesm5/core.js.ComponentRef.destroy (core.js:23239)
at RouterOutlet.push../node_modules/@angular/router/ivy_ngcc/fesm5/router.js.RouterOutlet.deactivate (router.js:5355)
at ActivateRoutes.push../node_modules/@angular/router/ivy_ngcc/fesm5/router.js.ActivateRoutes.deactivateRouteAndOutlet (router.js:2328)
at resolvePromise (zone.js:832)
at resolvePromise (zone.js:784)
at zone.js:894
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:28132)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:601)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:507)
at invokeTask (zone.js:1671)

In my estimation, this error is being thrown because the Highchart-Angular wrapper is attempting to destroy the initial chart which was destroyed by my "rerender" function.

It will take me some time to build a sample in codesandbox.io if it is required.

[karolkolodziej]

@tjdavis1111 Thank you for reporting this issue!

Could you please create a simplified version of your project/site in one of the online code editors that we can work on?
You can start from this: https://stackblitz.com/edit/highcharts-angular-basic-line
Without taking look at your code, it might be impossible to find the source of this issue.

[tjdavis1111]

Working on it right now.

…

On Mon, Sep 28, 2020 at 4:12 AM Karol Kołodziej ***@***.***> wrote: @tjdavis1111 <https://github.com/tjdavis1111> Thank you for reporting this issue! Could you please create a simplified version of your code in one of the online code editors that we can work on? You can start from this: https://stackblitz.com/edit/highcharts-angular-basic-line Without taking look at your code, it might be impossible to find the source of this issue. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#231 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEC6WNM4JHSZAUOYCY6STZLSIBHP3ANCNFSM4R4FM37Q> .

[tjdavis1111]

Here are links to github and stackblitz. The github repo has an illustrated step-by-step in the README.

Github

Stackblitz

[karolkolodziej]

First of all, huge thanks for such a good explanation and your demo. It helped me to fully understand the issue.

As it comes to your question. This wrapper doesn't support destroying the chart that is why you have to do this on your own to create functionalities like yours.
By first, creating the reference to the chart through the callback function, then using that reference you might update or destroy the chart if needed as I did it in the demo below.
You might read more about this in this issue which turns out to be a request for an enhancement: #218
If you like this idea, you might vote for that change in the issue mentioned above.

Demo: https://stackblitz.com/edit/highcharts-angular-basic-line-g6pyh1

[tjdavis1111]

Karol, thank you SO much for your response. The fact that you responded so quickly is one of the major reasons why I opted for Highcharts over d3.

[karolkolodziej]

Thanks for your trust!

[nisaanwaar]

hey @karolkolodziej I don't get it, how did you fix it?
I am facing the same issue. When I create a chart and export it. Any routing option after using the export throws the same exception as above.
When routing is triggered, do you want us to destroy the chart explicitly?

[karolkolodziej]

Could you please explain what kind of exporting are you talking about?
Are you able to edit the demo above to replicate your issue?

[nisaanwaar]

We are using offline export. with jspdf and svg2pdf, the same being used in highchart offline export demo.
My charts are being rendered dynamically with data being fed from backend apis. Cant create exact issue here.

[karolkolodziej]

I added an offline exporting module but still, I'm not able to recreate that issue- demo.

I don't need a full demo but something that shows the issue and replicates the error.
Without that, it will be hard to identify the source of the issue.