ngx-echarts directive contructor NgxEchartsConfig is null with Angular 9

[joniruokamo]

I have tried the new v5.0.0 with Angular 9

configuration:

• Angular v 9.1.0
• ngx-echarts v5.0.0
• echarts v4.8.0

And I get the following error:

core.js:6185 ERROR TypeError: Cannot read property 'init' of null

I see this comes from the line:

return this.ngZone.runOutsideAngular(() => this.echarts.init(dom, this.theme, this.initOpts));

where this.echarts is null.

I tried to modify the newly added .forRoot() in the app.module.ts with instructions from #236 and #237. This did not help.

[ICTlight]

deal？？

[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

[Reda1000]

Can confirm - upgraded Angular yesterday and found echarts missing today in production build via ng build --prod.

Allthough using ng serve it does display charts correctly.

[FonsecaJoao]

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

For those who want to apply this workaround, it is worth mentioning that the import in appModule needs to be like this:

imports: [
    ...,
    NgxEchartsModule,
],

instead of this:

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

[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

For those who want to apply this workaround, it is worth mentioning that the import in appModule needs to be like this:

imports: [
    ...,
    NgxEchartsModule,
],

instead of this:

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

Yes my bad. The only reason I did not mention that is because the build will give error if you still use forRoot, also the previous version of ngx-echarts never had forRoot so I thought it was self explanatory. :)

[lundmikkel]

I seem to have found a fix for this, when using version 5.0.0. As far as I can see, the problem arises with AOT (ahead-of-time compilation) being used. The dependency gets optimized away, somehow. The trick is to rewrite the import like this:

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

Not quite sure why it works, however.

[lundmikkel]

I seem to have found a fix for this, when using version 5.0.0.

This actually seems to cause type problems elsewhere, so might not really be a solution after all.

[VitalyName]

I solved it in my application. I make this steps:

1. Delete import import * as echarts from 'echarts';

2. Add function with import to app.module.ts

export function chartModule(): any {
    return import('echarts');
}

3. Add to import section in app.module.ts

    imports: [
        // Other imports

        NgxEchartsModule.forRoot({
            echarts: chartModule
        })
    ],

[Arberto99]

I solved it in my application. I make this steps:

1. Delete import import * as echarts from 'echarts';
2. Add function with import to app.module.ts

export function chartModule(): any {
    return import('echarts');
}

3. Add to import section in app.module.ts

    imports: [
        // Other imports

        NgxEchartsModule.forRoot({
            echarts: chartModule
        })
    ],

Useful, but found a better fix for the import in module:

NgxEchartsModule.forRoot({
  echarts: () => import('echarts'),
}),

without any function in app.module.ts, so the code is cleaner. :)

[BhagyashreeCH]

I seem to have found a fix for this, when using version 5.0.0. As far as I can see, the problem arises with AOT (ahead-of-time compilation) being used. The dependency gets optimized away, somehow. The trick is to rewrite the import like this:

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

Not quite sure why it works, however.

I have recently upgraded angular 7 to 9 even after tried to update multiple versions of ngx-echarts and echarts versions I was getting NgxEchartsConfig is null error, finally i was able to fix with your solution as mentioned above.

Angular: 9.1.13 "echarts": "^4.9.0", "ngx-echarts": "^6.0.0",

NgxEchartsModule.forRoot({ echarts: { init: echarts.init } }) Thank you sir lundmikkel...

[rickynguyenc]

Thanks you so much, It work for me