ngx-echarts
ngx-echarts copied to clipboard
Angular 8 support
There is bug in angular 8.
The page is blank when use in angular 8.
"@angular/animations": "^8.1.2", "@angular/common": "^8.1.2", "@angular/compiler": "^8.1.2", "@angular/core": "^8.1.2", "@angular/forms": "^8.1.2", "@angular/platform-browser": "^8.1.2", "@angular/platform-browser-dynamic": "^8.1.2", "@angular/router": "^8.1.2", "@auth0/angular-jwt": "^3.0.0", "@ctrl/ngx-codemirror": "^2.2.1", "@ng-bootstrap/ng-bootstrap": "^5.1.0", "@swimlane/ngx-datatable": "^15.0.2", "@types/bootbox": "^4.4.36", "@types/jquery": "^3.3.30", "@types/socket.io-client": "^1.4.32", "ang-jsoneditor": "^1.8.3", "angular-gridster2": "^8.0.0",
ERROR in ./node_modules/ngx-echarts/fesm5/ngx-echarts.js Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js): TypeError: Cannot read property 'kind' of undefined
@wcc526
I tested in an angular 8 project and ngx-echarts
worked well.
Maybe you need to reinstall your node_modules?
It's ok now.
.demo-chart { height: 400px; width: 400px }
add width.
I face a problem where the charts are rendered while doing a local ng serve
but once it is deployed, the charts are not being rendered. The parent div is just blank.
Can u share ur module code here? I had a similar problem:
main-es2015.b5803dc479506166248b.js:1 ERROR TypeError: Cannot read property 'init' of null
at main-es2015.b5803dc479506166248b.js:1
at a.invoke (polyfills-es2015.3d8c2b7e9d02c5bdeb6e.js:1)
at s.run (polyfills-es2015.3d8c2b7e9d02c5bdeb6e.js:1)
at ws.runOutsideAngular (main-es2015.b5803dc479506166248b.js:1)
at d.createChart (main-es2015.b5803dc479506166248b.js:1)
at d.onOptionsChange (main-es2015.b5803dc479506166248b.js:1)
at d.initChart (main-es2015.b5803dc479506166248b.js:1)
at main-es2015.b5803dc479506166248b.js:1
at a.invokeTask (polyfills-es2015.3d8c2b7e9d02c5bdeb6e.js:1)
at Object.onInvokeTask (main-es2015.b5803dc479506166248b.js:1)
I solved the problem with the following changes:
- I forked this repository and then changed the following lines in the directive's constructor:
this.echarts = config.echarts
to
this.echarts = config[0].echarts;
- Change the module import statement:
import * as echarts from 'echarts';
export function chartModule(): any {
echarts
}
...
@NgModule({
declarations: [
NgxEchartsModule.forRoot({
echarts: chartModule
}),
...
]
})
-
I compiled the package's repository again (with the changes) and then installed the dependency locally. With the following command:
npm install -s <FOLDER>
I hope to help u!!
Hi, again! I was studying about the Angular compiler. The ngx-echarts
works in ng serve
because of the compiler. I'll explain:
- The command
ng serve
uses the JIT (Just-in-Time) Angular compiler. - When the command
ng build
is executed in production mode, the Angular CLI uses the AOT (Ahead-of-time) Angular Compiler.
Thus, theecharts
module isn't passed in NgxEchartsModule.forRoot({...})
. In my case, I solved just by encapsulating the module within a function (shouldn't be an arrow function). Code example:
import * as echarts from 'echarts';
...
export function chartModule(): any {
return echarts
}
...
@NgModule({
imports: [
NgxEchartsModule.forRoot({
echarts: chartModule
}),
...
]
})
export class ExampleModule {}
If it solves your problem, let me know!
Hi, again! I was studying about the Angular compiler. The
ngx-echarts
works inng serve
because of the compiler. I'll explain:
- The command
ng serve
uses the JIT (Just-in-Time) Angular compiler.- When the command
ng build
is executed in production mode, the Angular CLI uses the AOT (Ahead-of-time) Angular Compiler.Thus, the
echarts
module isn't passed inNgxEchartsModule.forRoot({...})
. In my case, I solved just by encapsulating the module within a function (shouldn't be an arrow function). Code example:import * as echarts from 'echarts'; ... export function chartModule(): any { return echarts } ... @NgModule({ imports: [ NgxEchartsModule.forRoot({ echarts: chartModule }), ... ] }) export class ExampleModule {}
If it solves your problem, let me know!
It doesn't work for me. I didn't install ngx-echarts
locally. And I got the error:
main-es2015.85aaf8252f0bfc65ca4f.js:1 ERROR TypeError: this.echarts.init is not a function
at main-es2015.85aaf8252f0bfc65ca4f.js:1
at a.invoke (polyfills-es2015.5b10b8fd823b6392f1fd.js:1)
at s.run (polyfills-es2015.5b10b8fd823b6392f1fd.js:1)
at ll.runOutsideAngular (main-es2015.85aaf8252f0bfc65ca4f.js:1)
at ZY.createChart (main-es2015.85aaf8252f0bfc65ca4f.js:1)
at ZY.onOptionsChange (main-es2015.85aaf8252f0bfc65ca4f.js:1)
at c._next (main-es2015.85aaf8252f0bfc65ca4f.js:1)
at c.__tryOrUnsub (main-es2015.85aaf8252f0bfc65ca4f.js:1)
at c.next (main-es2015.85aaf8252f0bfc65ca4f.js:1)
at u._next (main-es2015.85aaf8252f0bfc65ca4f.js:1)
Hi, I have same problem. In dev server it works well, but in production it throws same error.
main.311935150ca355a8eedb.js:1 ERROR TypeError: this.echarts.init is not a function at main.311935150ca355a8eedb.js:1 at ZoneDelegate.invoke (polyfills.a6dd0dc00869cf04da36.js:1) at Zone.run (polyfills.a6dd0dc00869cf04da36.js:1) at NgZone.runOutsideAngular (main.311935150ca355a8eedb.js:1) at ngx_echarts_NgxEchartsDirective.createChart (main.311935150ca355a8eedb.js:1) at ngx_echarts_NgxEchartsDirective.onOptionsChange (main.311935150ca355a8eedb.js:1) at ngx_echarts_NgxEchartsDirective.initChart (main.311935150ca355a8eedb.js:1) at main.311935150ca355a8eedb.js:1 at ZoneDelegate.invokeTask (polyfills.a6dd0dc00869cf04da36.js:1) at Object.onInvokeTask (main.311935150ca355a8eedb.js:1)
Hi, I have same problem. In dev server it works well, but in production it throws same error.
main.311935150ca355a8eedb.js:1 ERROR TypeError: this.echarts.init is not a function at main.311935150ca355a8eedb.js:1 at ZoneDelegate.invoke (polyfills.a6dd0dc00869cf04da36.js:1) at Zone.run (polyfills.a6dd0dc00869cf04da36.js:1) at NgZone.runOutsideAngular (main.311935150ca355a8eedb.js:1) at ngx_echarts_NgxEchartsDirective.createChart (main.311935150ca355a8eedb.js:1) at ngx_echarts_NgxEchartsDirective.onOptionsChange (main.311935150ca355a8eedb.js:1) at ngx_echarts_NgxEchartsDirective.initChart (main.311935150ca355a8eedb.js:1) at main.311935150ca355a8eedb.js:1 at ZoneDelegate.invokeTask (polyfills.a6dd0dc00869cf04da36.js:1) at Object.onInvokeTask (main.311935150ca355a8eedb.js:1)
Check this out. I fixed it using this. https://github.com/xieziyu/ngx-echarts/issues/237#issuecomment-633534807
Check this out. I fixed it using this. #237 (comment)
Hi, everyone, I have the same problem trying to build in Angular 8 and this doesn't solve the probleme. : (
Any other idea ?
the workaround for this issue is to downgrade echarts for the time being.
"ngx-echarts": "^4.2.2",
"echarts": "^4.2.1",
These version worked for me in the production environment along with Angular 9
Alright, here's how I fixed it:
npm uninstall ngx-echarts
npm uninstall echarts
npm install [email protected]
npm install [email protected]
In the module where I use ngx-echarts, I removed the forRoot part, and simply imported the module like any other:
@NgModule({
imports: [
NgxEchartsModule,
],
At this point another error occured, but I remember the fix was rather simple:
npm install @angular-devkit/[email protected]
Hope this helps someone.
#241
imports: [
...,
NgxEchartsModule.forRoot({
echarts: { init: echarts.init }
})
],
I solved it in my application. https://github.com/xieziyu/ngx-echarts/issues/241#issuecomment-742777787