angular-fusioncharts
angular-fusioncharts copied to clipboard
fusioncharts
Does not work with Angular 11
I am trying to test FusionCharts and I followed web page instructions for installing:
npm install fusioncharts angular-fusioncharts --save
But, ... it does not work for Angular 11:
Warning: Entry point '@angular/core' contains deep imports into '/AngularUXv20-II/node_modules/angular-fusioncharts/node_modules/rxjs/Observable', '/AngularUXv20-II/node_modules/angular-fusioncharts/node_modules/rxjs/observable/merge', '/AngularUXv20-II/node_modules/angular-fusioncharts/node_modules/rxjs/operator/share', '/AngularUXv20-II/node_modules/angular-fusioncharts/node_modules/rxjs/Subject'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Compiling @angular/core : es2015 as esm2015
Error: Error on worker #1: TypeError: Cannot read property 'fileName' of null
at Object.getImportRewriter (/AngularUXv20-II/node_modules/@angular/compiler-cli/ngcc/src/rendering/utils.js:23:72)
at DtsRenderer.renderDtsFile (/AngularUXv20-II/node_modules/@angular/compiler-cli/ngcc/src/rendering/dts_renderer.js:77:72)
at /AngularUXv20-II/node_modules/@angular/compiler-cli/ngcc/src/rendering/dts_renderer.js:69:134
at Map.forEach (<anonymous>)
at DtsRenderer.renderProgram (/AngularUXv20-II/node_modules/@angular/compiler-cli/ngcc/src/rendering/dts_renderer.js:69:26)
at Transformer.transform (/AngularUXv20-II/node_modules/@angular/compiler-cli/ngcc/src/packages/transformer.js:93:52)
at /AngularUXv20-II/node_modules/@angular/compiler-cli/ngcc/src/execution/create_compile_function.js:52:42
at /AngularUXv20-II/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/worker.js:85:54
at step (/AngularUXv20-II/node_modules/tslib/tslib.js:143:27)
at Object.next (/AngularUXv20-II/node_modules/tslib/tslib.js:124:57)
at ClusterMaster.onWorkerMessage (/AngularUXv20-II/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:195:27)
at /AngularUXv20-II/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:55:95
at ClusterMaster.<anonymous> (/AngularUXv20-II/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:293:57)
at step (/AngularUXv20-II/node_modules/tslib/tslib.js:143:27)
at Object.next (/AngularUXv20-II/node_modules/tslib/tslib.js:124:57)
at /AngularUXv20-II/node_modules/tslib/tslib.js:117:75
at new Promise (<anonymous>)
at Object.__awaiter (/AngularUXv20-II/node_modules/tslib/tslib.js:113:16)
at EventEmitter.<anonymous> (/AngularUXv20-II/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:287:32)
at EventEmitter.emit (events.js:314:20)
An unhandled exception occurred: NGCC failed.
See "/private/var/folders/7g/qthp33t109dgr0rrcp_flv300000gn/T/ng-UOUGLf/angular-errors.log" for further details.
Also, it installs deprecated packages (like @angular/http).
Is FusionCharts maintained for latest versions of supposed supported platforms like Angular?
Regards
@jaimecigna Works with all the angular versions there is no constraints : https://codesandbox.io/s/angular-column3d-tlxtm?file=/package.json
@AyanBhadury your example doesn't use Angular 12 compiler. Your angular CLI is version 10. Also your
@angular-devkit/build-angular is not the version 12.x.x
"devDependencies": {
"@angular-devkit/build-angular": "~0.1001.7",
"@angular/cli": "~10.1.7",
"@angular/compiler-cli": "~10.1.6",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
},
in the Angular version 12 the compiler used is ivy
fusion charts does NOT seem to work well with ivy
@AyanBhadury here is my package.json
{
"name": "my-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.0.5",
"@angular/common": "~12.0.5",
"@angular/compiler": "~12.0.5",
"@angular/core": "~12.0.5",
"@angular/forms": "~12.0.5",
"@angular/platform-browser": "~12.0.5",
"@angular/platform-browser-dynamic": "~12.0.5",
"@angular/router": "~12.0.5",
"@ngrx/store": "^12.1.0",
"@ngrx/store-devtools": "^12.1.0",
"angular-fusioncharts": "^3.1.0",
"angular-gridster2": "^12.0.1",
"fusioncharts": "^3.17.0",
"rxjs": "~7.1.0",
"tslib": "^2.1.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.0.5",
"@angular/cli": "~12.0.5",
"@angular/compiler-cli": "~12.0.5",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"autoprefixer": "^10.2.6",
"jasmine-core": "~3.7.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"postcss": "^8.3.5",
"tailwindcss": "^2.2.2",
"tailwindcss-theming": "^3.0.0-beta.1",
"typescript": "~4.2.3"
}
}
@jaimecigna Please refer to my earlier solution : https://github.com/fusioncharts/angular-fusioncharts/issues/114#issuecomment-826831716
The example shared also uses angular-fusioncharts: "3.0.4"
@AyanBhadury I have tried to use angular-fusioncharts: "3.0.4" and it didn't work. I am getting the same error.
Generating browser application bundles (phase: setup)...Warning: Entry point '@angular/core' contains deep imports into '/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/angular-fusioncharts/node_modules/rxjs/Observable', '/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/angular-fusioncharts/node_modules/rxjs/observable/merge', '/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/angular-fusioncharts/node_modules/rxjs/operator/share', '/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/angular-fusioncharts/node_modules/rxjs/Subject'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Compiling @angular/core : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Error: Error on worker #2: TypeError: Cannot read property 'fileName' of null
at Object.getImportRewriter (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/rendering/utils.js:23:72)
at DtsRenderer.renderDtsFile (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/rendering/dts_renderer.js:77:72)
at /Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/rendering/dts_renderer.js:69:158
at Map.forEach (<anonymous>)
at DtsRenderer.renderProgram (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/rendering/dts_renderer.js:69:26)
at Transformer.transform (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/packages/transformer.js:93:52)
at /Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/execution/create_compile_function.js:52:42
at /Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/worker.js:85:54
at step (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tslib/tslib.js:143:27)
at Object.next (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tslib/tslib.js:124:57)
at ClusterMaster.onWorkerMessage (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:195:27)
at /Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:55:95
at ClusterMaster.<anonymous> (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:293:57)
at step (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tslib/tslib.js:143:27)
at Object.next (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tslib/tslib.js:124:57)
at /Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tslib/tslib.js:117:75
at new Promise (<anonymous>)
at Object.__awaiter (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tslib/tslib.js:113:16)
at EventEmitter.<anonymous> (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:287:32)
at EventEmitter.emit (events.js:315:20)
/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@ngtools/webpack/src/ngcc_processor.js:129
throw new Error(errorMessage + `NGCC failed${errorMessage ? ', see above' : ''}.`);
^
Error: NGCC failed.
at NgccProcessor.process (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@ngtools/webpack/src/ngcc_processor.js:129:19)
at /Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@ngtools/webpack/src/ivy/plugin.js:110:27
at Hook.eval [as call] (eval at create (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:18:1)
at Hook.CALL_DELEGATE [as _call] (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/webpack/lib/Compiler.js:1033:30)
at /Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/webpack/lib/Compiler.js:1076:29
at Hook.eval [as callAsync] (eval at create (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:20:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.compile (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/webpack/lib/Compiler.js:1071:28)
at /Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/webpack/lib/Watching.js:188:19
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `ng serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/g87907/.npm/_logs/2021-07-01T14_03_51_048Z-debug.log
➜ cmp-ebh-app git:(feature/fusion) ✗ (node:78924) UnhandledPromiseRejectionWarning: Error: write EPIPE
at process.target._send (internal/child_process.js:806:20)
at process.target.send (internal/child_process.js:677:19)
at /Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/utils.js:51:21
at new Promise (<anonymous>)
at Object.sendMessageToMaster (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/utils.js:46:16)
at /Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/worker.js:104:66
at step (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tslib/tslib.js:143:27)
at Object.throw (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tslib/tslib.js:124:57)
at rejected (/Users/g87907/Desktop/htdocs/cmp-ebh-app/node_modules/tslib/tslib.js:115:69)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:78924) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:78924) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
@jaimecigna Probably the app was not built properly or you have not installed [email protected], I have updated the demo as per your dev dependencies: https://codesandbox.io/s/angular-column3d-tlxtm?file=/package.json
@AyanBhadury thanks, it may be my compiler or something. I will try to uninstall my angular cli and re-install it to see if that solves it.
@AyanBhadury I have the same issue as @jaimecigna, I get the "Cannot read property 'fileName' of null" error when building our Angular 12 app w/the latest version of angular-fusioncharts. When I switch back to 3.0.4 (but keep fusioncharts package at ^3.17.0) then I get a new build error:
C:\Dev\RPR\Websites\Angular>npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR! @angular/core@"^12.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"^4.0.0" from [email protected]
npm ERR! node_modules/angular-fusioncharts
npm ERR! angular-fusioncharts@"3.0.4" from the root project
If I'm reading this correctly, angular-fusioncharts version 3.0.4 is trying to use Angular version 4?! This is a show stopper, please advise if this package is just obsolete now and I need to go with another product for Angular charts.
@justintoth No this is happening because of npm cache may be, please delete node modules and package.lock.jsom and reinstall the packages using npm i also make sure ^ symbol is not used in the angular-fusioncharts version,
For example it will be "angular-fusioncharts":"3.0.4"
Sandbox demo : https://codesandbox.io/s/angular-column3d-tlxtm?file=/package.json
@AyanBhadury No luck, I'm already using "3.0.4" for angular-fusioncharts. I deleted the contents of node_modules and package.lock.json, I even tried "npm cache clean --force" for good measure, and reinstalled with "npm install" which fails immediately with the same error as before. Where is this Angular core version 4.0.0 coming from within your package?
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"^4.0.0" from [email protected]
npm ERR! node_modules/angular-fusioncharts
npm ERR! angular-fusioncharts@"3.0.4" from the root project
try deleting the package lock file and the node_modules directory then see if you can run a fresh install on it and hopefully it will work for you
@justintoth please check out my sandbox demo else clone this repo : https://github.com/AyanBhadury/angular-fusioncharts-demo
@AyanBhadury I have got same issue (using [email protected]) when use docker from node:14 build and run build --prod="true" (it work in local). Please help me.
@chidongyh2 Please share the error you are getting & also your package.json gist
When do You fix this problem? The problem had been reported for a couple of months and I see that the support team has not done anything with it. Why did you release the new version of the library which is not working correctly? I want to use all features from your library but I can not "Use old version - problem solution"
@plusnia-pgs fusioncharts is the library which provides all the functionality & features which you can use the latest 3.17.0, angular-fusioncharts is only a wrapper that helps you to integrate fusioncharts in an angular app, the core is fusioncharts hence there won't be any features compromise, the issue for angular-fusioncharts is fixed internally & will be released along with fusioncharts 3.18
For now please use angular-fusioncharts : 3.0.4
What is the sense of using raw fusioncharts lib in the Angular app when the angular wrapper exists and you even support the docs for Angular? So you should say to everybody who uses the angular that the angular wrapper does not have any sense and is onlly a feature for old version of app
@plusnia-pgs Kindly read my explanation again, you need to use [email protected] but that will support all the latest version features & improvements, for more details drop a mail to [email protected] with your license details.
Ok. Sorry @AyanBhadury, Now I understand. Thank you for the response. I will check it and let you know if everything works
ngCC compilation issue has been fixed, please upgrade to 3.2.0 : http://www.npmjs.com/package/angular-fusioncharts
@justintoth @jvegaseg @plusnia-pgs @jaimecigna