Fusion Charts not rendering in Angular 18

[paksydavid]

After upgrading to Angular 18.0.3, FusionCharts are not rendering anymore.

Additionally the following error is logged to the browser developer console:

ERROR TypeError: FusionChartsModules is not a function
    at fusioncharts.service.js:51:21
    at Array.forEach (<anonymous>)
    at FusionChartsService2.resolveFusionCharts (fusioncharts.service.js:45:21)
    at new FusionChartsService2 (fusioncharts.service.js:26:14)
    at NodeInjectorFactory.FusionChartsService_Factory [as factory] (fusioncharts.service.js:65:81)
    at getNodeInjectable (core.mjs:6007:44)
    at searchTokensOnInjector (core.mjs:5930:16)
    at lookupTokenUsingNodeInjector (core.mjs:5879:34)
    at getOrCreateInjectable (core.mjs:5789:23)
    at ɵɵdirectiveInject (core.mjs:11331:19)

Versions:

"dependencies": {
    "@angular/animations": "^18.0.3",
    "@angular/cdk": "^18.0.3",
    "@angular/common": "^18.0.3",
    "@angular/compiler": "^18.0.3",
    "@angular/core": "^18.0.3",
    "@angular/forms": "^18.0.3",
    "@angular/material": "^18.0.3",
    "@angular/platform-browser": "^18.0.3",
    "@angular/platform-browser-dynamic": "^18.0.3",
    "@angular/router": "^18.0.3",
    "angular-fusioncharts": "^4.0.3",
    "fusioncharts": "^3.20.0",
    "rxjs": "~6.6.6",
    "tslib": "^2.0.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.4",
    "@angular-eslint/builder": "18.0.1",
    "@angular-eslint/eslint-plugin": "18.0.1",
    "@angular-eslint/eslint-plugin-template": "18.0.1",
    "@angular-eslint/schematics": "18.0.1",
    "@angular-eslint/template-parser": "18.0.1",
    "@angular/cli": "^18.0.4",
    "@angular/compiler-cli": "^18.0.3",
    "@angular/language-service": "^18.0.3",
  }

How we import / configure FusionCharts

import {FusionChartsModule} from "angular-fusioncharts";

import * as FusionCharts from "fusioncharts";
import * as charts from "fusioncharts/fusioncharts.charts";
import * as PowerCharts from "fusioncharts/fusioncharts.powercharts";

FusionCharts.options['license']({
  key: '<license>',
  creditLabel: false,
});

FusionChartsModule.fcRoot(FusionCharts, PowerCharts, charts);

@NgModule({
  imports: [
   
    // FusionCharts bridge library
    FusionChartsModule,
  ]
})
...

Is this maybe because angular-fusioncharts does not support Angular 18 yet?

Do you maybe know about a workaround to fix this?

Many thanks in advance for you help. 🙏

[zachburtle-trinity]

I also have this same issue but on Angular 17

[paksydavid]

I also have this same issue but on Angular 17

Interesting, with Angular 17, FusionCharts works without a problem for me.

EDIT: I don't use ESBuild.

[rnogueira-namoadigital]

same here Angular 17, but I am using Agular ESBuild instead

[PatelBhumit]

In Angular 17 i am getting same error

[PatelBhumit]

@paksydavid can you please provide demo or code which is working with angular 17.

[rnogueira-namoadigital]

@paksydavid can you please provide demo or code which is working with angular 17.

You need to change angular.json builder to @angular-devkit/build-angular:browser
#192

But Fusioncharts must be fix in order to work with Angular builder @angular-devkit/build-angular:application and @angular-devkit/build-angular:browser-esbuild.

It might have some kind of workaround in Webpack that is not built in Angular Framework/Webpack

[PatelBhumit]

@rnogueira-namoadigital Now it is working, Thank you

[ishachauhan97]

It works in a default angular 17 project, but I am using Webpack for bundling and getting a similar error in developer console.

ERROR TypeError: FusionChartsModules is not a function
at fusioncharts.service.js:51:1
at Array.forEach ()
at webpack_modules../node_modules/angular-fusioncharts/src/fusioncharts.service.js.FusionChartsService.resolveFusionCharts (fusioncharts.service.js:45:1)
at new FusionChartsService (fusioncharts.service.js:26:1)
at NodeInjectorFactory.FusionChartsService_Factory [as factory] (fusioncharts.service.js:65:74)
at getNodeInjectable (core.mjs:4370:1)
at searchTokensOnInjector (core.mjs:4297:1)
at lookupTokenUsingNodeInjector (core.mjs:4246:1)
at getOrCreateInjectable (core.mjs:4158:1)
at Module.ɵɵdirectiveInject (core.mjs:11974:1)