Error building with FusionChartsModule.forRoot method

[CriPstian]

Hello, I installed the angular2-fusioncharts from npm and all works well. I created a chart and managed to display it without problems. When I run a build with angular-cli I recieve the following

ERROR in Error encountered resolving symbol values statically. Calling function 'FusionChartsModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule.

Did anyone else encountered this issue using this?

[wwrafter]

I have the same issue.

[danielfnz]

Me too

[danielfnz]

@CriPstian, @wwrafter

Did you solve that?

[wwrafter]

No, I didn't have the time. I used ngcharts2(which wraps chart.js). When this issue gets resolved, I'll look into migrating.

[danielfnz]

I think that the problem is there. imports: [ FusionChartsModule.forRoot(FusionCharts, Charts) ],

[CriPstian]

Yes, I found out that the angular/cli is not able to compile those lambdas in the forRoot method. Right now I am unable to test it but it may work with @angular/cli@1.0.0. Will reply with an answer as soon I get to check that.

AFTER CHECK: no luck, the angular-cli version had nothing to do with it. hope this will get fixed soon.

[danielfnz]

Work for me add to main.ts

import { FusionChartsModule } from 'angular2-fusioncharts'; import as FusionCharts from 'fusioncharts'; import as Charts from 'fusioncharts/fusioncharts.charts'; FusionChartsModule.forRoot(FusionCharts, Charts);

import {enableProdMode} from '@angular/core'; enableProdMode();

[rohitkr]

@CriPstian @wwrafter @danielfnz Could you please check with the latest version and let me know if this is fixed.

[wwrafter]

ERROR in C:/UI/src/app/app.module.ts (33,25): Module '"C:/UI/node_modules/@types/fusioncharts/fusioncharts.charts"' resolves to a non-module entity and cannot be imported using this construct.

"@angular/common": "^4.0.1", "@angular/compiler": "^4.0.1", "@angular/core": "^4.0.1", "@angular/forms": "^4.0.1", "@angular/http": "^4.0.1", "@angular/platform-browser": "^4.0.1", "@angular/platform-browser-dynamic": "^4.0.1", "@angular/router": "^4.0.1", "@angular/cli": "^1.0.0", "@angular/compiler-cli": "^4.0.1",, "angular2-fusioncharts": "^1.0.2-rc.4",

import { FusionChartsModule } from 'angular2-fusioncharts'; import as FusionCharts from 'fusioncharts'; import as Charts from 'fusioncharts/fusioncharts.charts';

imports: [ // Specify FusionChartsModule as an import // and pass FusionCharts and Charts as a dependency FusionChartsModule.forRoot(FusionCharts, Charts) ] Let me know if there is additional information required.

[wwrafter]

After re-reading the error, I changed import from: import * as Charts from 'fusioncharts/fusioncharts.charts'; to: import { Charts } from 'fusioncharts/fusioncharts';

And that allows a compile of the module to succeed. I haven't actually tried using the chart, but it's progress. :-) And if that actually solves the problem, the README.md needs to be updated.

[henkverschoor1994]

If you set the import to import { Charts } from 'fusioncharts/fusioncharts'; FusionChart is not working. The problem is in the typing files. This line: declare function charts(H: FusionChartStatic): FusionChartStatic; must be changed into this: declare var charts: (H: FusionChartStatic) => FusionChartStatic;

[rohitkr]

Regarding the error:

ERROR in C:/UI/src/app/app.module.ts (33,25): Module '"C:/UI/node_modules/@types/fusioncharts/fusioncharts.charts"' resolves to a non-module entity and cannot be imported using this construct.

This issue will be fixed once the pull request #15687 will be merged. Meanwhile, please try replacing the fusioncharts type definition files stored in your C:/UI/node_modules/@types/fusioncharts directory with the download fusioncharts.zip files. There is no change in the API so the README.md doesn't require any change :)

[henkverschoor1994]

This works good:

My installed packages:

    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "^3.4.4",
    "@ionic-native/diagnostic": "^3.4.4",
    "@ionic-native/insomnia": "^3.4.4",
    "@ionic-native/native-storage": "^3.4.4",
    "@ionic-native/network": "^3.4.4",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "angular2-fusioncharts": "1.0.2-rc.4",
    "ionic-angular": "3.0.0",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"

My import in the app.module.ts file:

// Import angular2-fusioncharts
import { FusionChartsModule } from 'angular2-fusioncharts';
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as Widgets from 'fusioncharts/fusioncharts.widgets';

@NgModule({
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        FusionChartsModule.forRoot(FusionCharts, Charts, Widgets)
    ],

And I changed the typescript definition files as above.

[CriPstian]

Ok my build passed by changing the /node_modules/@types/fusioncharts/fusioncharts.charts.d.ts for the moment. (adding line 3)

import { FusionChartStatic } from "fusioncharts";

declare namespace Charts {}
declare function Charts(H: FusionChartStatic): FusionChartStatic;
export = Charts;
export as namespace charts;

but now if I build with ng build --prod i get the error

node_modules/angular2-fusioncharts/src/fusioncharts.component.ngfactory.ts (690,81): Property 'containerId' is private and only accessible within class 'FusionChartsComponent'.

[CriPstian]

Hello again, removed the private access modifier from /node_modules/angular2-fusioncharts/src/fusioncharts.component.ts and it now builds, I am sure that is not the way to go but now it builds with success with ng build --prod. But when I load the page I get an error in the console that says: TypeError: t.getFusionChartsStatic(...) is not a constructor

I have to metion, that I am still using Angular 2 version inside my project

"dependencies": {
    "@angular/common": "^2.4.6",
    "@angular/compiler": "^2.4.6",
    "@angular/core": "^2.4.6",
    "@angular/forms": "^2.4.6",
    "@angular/http": "^2.4.6",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "^2.4.6",
    "@angular/platform-browser-dynamic": "^2.4.6",
    "@angular/router": "^3.3.1",
    "angular-oauth2-oidc": "^1.0.20",
    "angular2-fusioncharts": "^1.0.2-rc.4",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.5.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.1.1",
    "moment": "^2.18.0",
    "ng-pick-datetime": "^4.0.1",
    "ng2-charts": "^1.5.0",
    "ng2-cookies": "^1.0.6",
    "ng2-date-time-picker": "^2.0.12",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  }

[CriPstian]

Upgraded to Angular 4 version but nothing changed. I am able to start up the application and use the charts only using --no-aot from angular-cli which is not what I desire, but it works...

ng serve --prod --no-aot

running with just ng serve --prod will build but it will throw an error when it tries to build the chart

t.getFusionChartsStatic(...) is not a constructor

[henkverschoor1994]

I got the same error. It is because the import is not correct. Delete the plugin, and re-install it. Then you import the modules which you need as I said in an earlier post. Next you change the typing files, as said above. It must now work.

You got the error is not a constructor because you imported it as a function, and the code need an constructor.

[rohitkr]

@CriPstian

Try using a provider function for FusionCharts in the NgModule

export class FusionChartsProvider {
    constructor (chartParameters: Object) {
        Charts(FusionCharts);
        PowerCharts(FusionCharts);
        Widgets(FusionCharts);

        return new FusionCharts(chartParameters);
    }
}

@NgModule({
    imports: [
        BrowserModule,
        FusionChartsModule.forRoot(FusionChartsProvider)
    ],

[CriPstian]

@rohitkr Thank you but it still issues the following error.

ERROR in Error encountered resolving symbol values statically. Calling function 'FusionChartsModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule

[BryantLee-atalent]

me too

[rsperlongo]

Its work for me

Just put "import as Charts from 'fusioncharts';" instead "import as Charts from 'fusioncharts/fusioncharts.charts';" . The error has gone.

Take off in declaration (app.module.ts) FusionChartsComponent

[chinthu]

build is working fine with "^1.0.2-rc.5" but still shows error when rendering ERROR Error: Uncaught (in promise): TypeError: l.core is not a function

[rousan]

Try to use the latest version of angular2-fusioncharts and use fcRoot() method instead of forRoot() as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import angular2-fusioncharts
import { FusionChartsModule } from 'angular2-fusioncharts';

// Import FusionCharts library and chart modules
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';

// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, Charts, FintTheme);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Specify FusionChartsModule as import
    FusionChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[ashok1994]

We recommend now to use a angular-fusioncharts , Only changed step will be in step 2 Change the following line import { FusionChartsModule } from 'angular2-fusioncharts'; to import { FusionChartsModule } from 'angular-fusioncharts';

Closing for now , please feel free to reopen , if the problem persists