fusioncharts / angular-fusioncharts

Angular Component for FusionCharts JavaScript Charting Library
https://fusioncharts.github.io/angular-fusioncharts/#/ex1
Other
55 stars 37 forks source link

HeatMap: Unhandled Promise rejection in Angular v.7 app #68

Closed Vnam92 closed 4 years ago

Vnam92 commented 4 years ago

Hi, there! I'm getting below error if choose heatmap as type for fusion-chart in Angular v.7 app.

<root> ; Task: Promise.then ; Value: Error: ChunkLoadError: Loading chunk 4 failed.
(error: http://localhost:4200/app/fusioncharts.powercharts.js)
    at Function.a.e (fusioncharts.js:13)
    at d (fusioncharts.js:13)
    at Function.<anonymous> (fusioncharts.js:13)
    at i (fusioncharts.js:13)
    at o (fusioncharts.js:13)
    at f (fusioncharts.js:13)
    at e.t.chartType (fusioncharts.js:13)
    at new e (fusioncharts.js:13)
    at new h (fusioncharts.js:13)
    at FusionChartsConstructor (fusioncharts.constructor.js:3)
    at fusioncharts.js:13
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1744)
    at HTMLScriptElement.globalZoneAwareCallback (zone.js:1770) Error: ChunkLoadError: Loading chunk 4 failed.

It reproduces even if use chart configuration from official docs: https://www.fusioncharts.com/charts/heat-map-charts/heat-map-using-variants-of-single-color?framework=angular4

P.S. For other types of charts, they render fine and my imports of chart-modules matches to official tutorials. Versions of fusion charts: angular-fusioncharts: ^3.0.3 fusioncharts: ^3.14.0-sr.1

my template:

    <fusioncharts
      width="100%"
      height="350"
      [type]="heatmap"
      [dataFormat]="'json'"
      [dataSource]="chartDataSource"
    >
    </fusioncharts>

Is it known issue?

Vnam92 commented 4 years ago

Will close issue. Resolved by importing additional module : import * as charts from "fusioncharts/fusioncharts.powercharts";

Tchoupinax commented 1 month ago

Hey @Vnam92, For Vue.js I also had to add this import. Exemple with Nuxt.js. Thanks!

import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
// Below the import I have to add
import PowerCharts from "fusioncharts/fusioncharts.powercharts";

export default defineNuxtPlugin(nuxtApp => {
 // And then add here
  nuxtApp.vueApp.use(VueFusionCharts, FusionCharts, Charts, PowerCharts);
})