Compile Error with Angular 4

[hfye]

".../node_modules/@types/fusioncharts/fusioncharts.charts"' resolves to a non-module entity and cannot be imported using this construct. ".../app/app.module.ts (23,9): Cannot find name 'FusionChartsComponent'.

Can you pls help?

[suddhasatwahackathon]

Hi I am also facing the same problem node_modules/@types/fusioncharts/fusioncharts.charts"' resolves to a non-module entity and cannot be imported using this construct.

when i importing the FusionCharts Charts module into my ngModule app in angularV4 import * as Charts from 'fusioncharts/fusioncharts.charts'; as in the readme .

Can some one help me on these

Thanks

[rohitkr]

@hfye @suddhasatwahackathon

This issue will be fixed once the pull request #15687 will be merged. Meanwhile, please try replacing the fusioncharts type definition files in the node_modules/@types/fusioncharts with download fusioncharts.zip files.

[suddhasatwahackathon]

Ok thanks a lot for the help. I update the typing fusion chart file fusioncharts.charts.d.ts for the time being and it works import { FusionChartStatic } from "fusioncharts";

declare var Charts: (H: FusionChartStatic) => FusionChartStatic; export = Charts; export as namespace Charts;

And one thing when i am rendering fusion chart directive inside the hidden tab, I am getting this error on runtime core.es5.js:1084 ERROR Error: #03091456 chartobject-1.render() Error >> Unable to find the container DOM element..

But the same thing is working on the visible element or the default tab on the page load.

[vasuneet]

When it will be resolved. I am not able to use charts in my angular 2 application due to this issue. How i can import FusionChartsComponent . In documentation it is not mentioned.

[gvorster]

I'm using angular 4.3.1 Trying the suggestions from @rohitkr and @suddhasatwahackathon but still get the error " Cannot find name 'FusionChartsComponent'

[nehajayadeep-tcs]

any update on this?

[chinthu]

ERROR Error: Uncaught (in promise): TypeError: l.core is not a function TypeError: l.core is not a function

I got this error after rendering in angular4.3

[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

[Marimuthu-Aathi]

I install Fusioncharts module.But I'm getting the following error ERROR in src/app/components/Writeoff/Writeoff.Component.ts(333,23): error TS2554: Expected 2-4 arguments, but got 1. src/app/components/Writeoff/Writeoff.module.ts(15,36): error TS2307: Cannot find module 'angular-fusioncharts'. src/app/components/Writeoff/writeoff.module.ts(15,36): error TS2307: Cannot find module 'angular-fusioncharts'.

I have added in app module like below : import { FusionChartsModule } from 'angular-fusioncharts';

// Load FusionCharts import as FusionCharts from 'fusioncharts'; // Load Charts module import as Charts from 'fusioncharts/fusioncharts.charts'; // Load themes import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

FusionChartsModule.fcRoot( FusionCharts, Charts, FusionTheme ) Can any one help me for this issue. Thanks in advance

[aswinr2c]

I'm getting the following error when running tests via jest -

TypeError: FusionChartsModules is not a function

I have the following code -

import { FusionChartsModule } from 'angular-fusioncharts';

// Load FusionCharts
import * as FusionCharts from 'fusioncharts';

// Load Charts module
import * as Charts from 'fusioncharts/fusioncharts.charts';

// Load themes
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);

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

These are the packages I have and the versions -

The application compiles fine ✅ No console errors ✅ The charts render fine ✅ BUT the Jest tests keep failing with the error message - TypeError: FusionChartsModules is not a function ❌

I'm importing FusionChartsModule in the spec the exact same way as we're importing the app. Also, there are no typos - say FusionChartsModules (which I thought was a possibility based on the error).

This is how my tsconfigs look -

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,    
    "strictPropertyInitialization": false, 
    "allowSyntheticDefaultImports": true,    
    "esModuleInterop": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }  
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "esnext",
    "types": [],
    "allowJs": true,
    "target": "es2015"
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

tsconfig.spec.ts

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "esnext",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

The scripts section in angular.json looks like the following -

"scripts": [
              "src/assets/js/particles.min.js",
              "src/assets/js/typed.min.js",              
              "src/assets/js/fusioncharts/fusioncharts.js",
              "src/assets/js/fusioncharts/fusioncharts.widgets.js",
              "src/assets/js/fusioncharts/fusioncharts.charts.js",
              "src/assets/js/fusioncharts/fusioncharts.powercharts.js",
              "src/assets/js/fusioncharts/fusioncharts.gantt.js",
              "src/assets/js/fusioncharts/fusioncharts.treemap.js",
              "src/assets/js/fusioncharts/fusioncharts.zoomscatter.js",
              "src/assets/js/fusioncharts/fusioncharts.zoomline.js",
              "src/assets/js/fusioncharts/fusioncharts.overlappedbar2d.js",
              "src/assets/js/fusioncharts/fusioncharts.overlappedcolumn2d.js",
              "src/assets/js/fusioncharts/fusioncharts.maps.js",
              "src/assets/js/fusioncharts/themes/fusioncharts.theme.fusion.js"
 ]