Angular 8 support

[wcc526]

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

[xieziyu]

@wcc526 I tested in an angular 8 project and ngx-echarts worked well. Maybe you need to reinstall your node_modules?

[wcc526]

It's ok now.

.demo-chart { height: 400px; width: 400px }

add width.

[adisreyaj]

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.

[pedrohavay]

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:

1. 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;

2. Change the module import statement:

import * as echarts from 'echarts';

export function chartModule(): any {
  echarts
}

...

@NgModule({
  declarations: [
    NgxEchartsModule.forRoot({
      echarts: chartModule
    }),
    ...
   ]
})

3. 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!!

[pedrohavay]

Hi, again! I was studying about the Angular compiler. The ngx-echarts works in ng serve because of the compiler. I'll explain:

1. The command ng serve uses the JIT (Just-in-Time) Angular compiler.
2. 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!

[duqian42707]

Hi, again! I was studying about the Angular compiler. The ngx-echarts works in ng serve because of the compiler. I'll explain:

1. The command ng serve uses the JIT (Just-in-Time) Angular compiler.
2. 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!

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)

[marcinN90]

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)

[adisreyaj]

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

[the1alt]

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 ?

[cray2015]

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

[vandernath]

Alright, here's how I fixed it:

npm uninstall ngx-echarts
npm uninstall echarts

npm install ngx-echarts@4.2.2
npm install echarts@4.2.1

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/build-angular@0.803.20

Hope this helps someone.

[zjl1985]

241

imports: [
    ...,
    NgxEchartsModule.forRoot({
      echarts: { init: echarts.init }
    })
],

[VitalyName]

I solved it in my application. https://github.com/xieziyu/ngx-echarts/issues/241#issuecomment-742777787