search

fusioncharts / angular-fusioncharts

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

Does not work with Angular 11 #114

Open jvegaseg opened 3 years ago

jvegaseg commented 3 years ago

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

AyanBhadury commented 3 years ago

@jvegaseg Please use angular-fusioncharts : "3.0.4"

VamanPatel commented 3 years ago

@AyanBhadury thanks for sharing this.

jaimecigna commented 3 years ago

It doesn't work on Angular 12 either.....

Any updates on this?

AyanBhadury commented 3 years ago

@jaimecigna Works with all the angular versions there is no constraints : https://codesandbox.io/s/angular-column3d-tlxtm?file=/package.json

jaimecigna commented 3 years ago

@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 commented 3 years ago

@jaimecigna which version of angular-fusioncharts are you using?

jaimecigna commented 3 years ago

@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"
  }
}
AyanBhadury commented 3 years ago

@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"

jaimecigna commented 3 years ago

@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! cmp-ebh-app@0.0.0 start: `ng serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cmp-ebh-app@0.0.0 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.
AyanBhadury commented 3 years ago

@jaimecigna Probably the app was not built properly or you have not installed angular-fusioncharts@3.0.4, I have updated the demo as per your dev dependencies: https://codesandbox.io/s/angular-column3d-tlxtm?file=/package.json

jaimecigna commented 3 years ago

@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 commented 3 years ago

@jaimecigna For more assistance drop a mail to support@fusioncharts.com

jaimecigna commented 3 years ago

@AyanBhadury thanks

justintoth commented 3 years ago

@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: rpr@2.0.0
npm ERR! Found: @angular/core@12.1.2
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 angular-fusioncharts@3.0.4
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.

AyanBhadury commented 3 years ago

@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

justintoth commented 3 years ago

@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 angular-fusioncharts@3.0.4
npm ERR! node_modules/angular-fusioncharts
npm ERR!   angular-fusioncharts@"3.0.4" from the root project
jaimecigna commented 3 years ago

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

AyanBhadury commented 3 years ago

@justintoth please check out my sandbox demo else clone this repo : https://github.com/AyanBhadury/angular-fusioncharts-demo

chidongyh2 commented 3 years ago

@AyanBhadury I have got same issue (using angular-fusioncharts@3.0.4) when use docker from node:14 build and run build --prod="true" (it work in local). Please help me.

AyanBhadury commented 3 years ago

@chidongyh2 Please share the error you are getting & also your package.json gist

plusnia-pgs commented 3 years ago

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"

AyanBhadury commented 3 years ago

@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

plusnia-pgs commented 3 years ago

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

AyanBhadury commented 3 years ago

@plusnia-pgs Kindly read my explanation again, you need to use angular-fusioncharts@3.0.4 but that will support all the latest version features & improvements, for more details drop a mail to support@fusioncharts.com with your license details.

plusnia-pgs commented 3 years ago

Ok. Sorry @AyanBhadury, Now I understand. Thank you for the response. I will check it and let you know if everything works

AyanBhadury commented 3 years ago

ngCC compilation issue has been fixed, please upgrade to 3.2.0 : http://www.npmjs.com/package/angular-fusioncharts

@justintoth @jvegaseg @plusnia-pgs @jaimecigna