ERROR TypeError: e.echarts is null when ng build is executed in production mode

[niijyeni]

@types/echarts 4.6.2 ngx-echarts 5.0.0 echarts 4.8.0 angular 8.3.26

[FonsecaJoao]

241 Possible solution

[lundmikkel]

Could this issue get some attention?

[vishnu-dev]

Really need a solution for this. Please help @xieziyu.

The below workaround seems to work, but need a concrete solution,

import {init} from 'echarts';

Module import should be like

NgxEchartsModule.forRoot({echarts: {init}})

Also, Production build works only without the Ahead of time compiler.

ng build --prod

[lundmikkel]

Agree, @vishnu-dev. Though we've used your solution previously, it broke the types system for projects consuming an npm package with ECharts and @types/echarts. We've gone back to downgrading ngx-echarts to version 4.2.1. Haven't encountered any problems with that yet.

[lundmikkel]

@xieziyu Does this have no interest to you? It's been more than a month since the last comment, and there are multiple issues that all complain about this particular bug. You don't seem to reply to any of them, even when you are tagged. Is this package one we can trust in, or should we start searching for others?

[xieziyu]

@lundmikkel SORRY for the late reply. I fail to reproduce this issue in my projects. Could you help to setup a minimal reproduction environment or a repo? That would be great helpful to fix this issue.

[vishnu-dev]

@xieziyu This is the config as mentioned by OP.

@types/echarts 4.6.2 ngx-echarts 5.0.0 echarts 4.8.0 angular 8.3.26

Also, ensure your global angular version is the same as the above i.e. ng --version should give 8.3.26

[pierrebonny]

Please help, this issue is really annoying Angular 8.2.3 ngx-echarts 5.1.1 echarts 4.7.0

[xieziyu]

@pierrebonny @vishnu-dev

This should work

// replace import * as echarts from 'echarts';
export function echarts() {
  return import('echarts');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxEchartsModule.forRoot({
      echarts,
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

[pierrebonny]

@xieziyu thanks for the answer but I am trying to custom build echarts thanks to your readme. How should i fix the problem as I use an external custom-echarts.ts file as explained in the readme ?

Thanks

[huu8]

@pierrebonny @vishnu-dev

This should work

// replace import * as echarts from 'echarts';
export function echarts() {
  return import('echarts');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxEchartsModule.forRoot({
      echarts,
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

it is doesn't work

[pierrebonny]

@xieziyu thanks for the answer but I am trying to custom build echarts thanks to your readme. How should i fix the problem as I use an external custom-echarts.ts file as explained in the readme ?

Thanks

Can someone help on this issue ? thx

[javkhaanj7]

@pierrebonny I had same issue too on custom build. The above answer https://github.com/xieziyu/ngx-echarts/issues/243#issuecomment-688818402 actually solves the issue in my case. You could try this:

Angular: 8.0.2 echarts: ^4.9.0, ngx-echarts: ^5.1.2

custom-echarts.ts

export * from 'echarts/src/echarts';

import 'echarts/src/chart/line';

import 'echarts/src/component/title';
import 'echarts/src/component/tooltip';

[your].module.ts

..
import { NgxEchartsModule } from 'ngx-echarts';
..
export function echarts() {
  return import('./custom-echarts');
}
..
@NgModule({
  ..
  imports: [
    ..
    NgxEchartsModule.forRoot({
      echarts
    }),
    ..
  ]
})
export class [Your]Module { }

[weiwan-gmail]

The solution doesn't work when ngx-echarts is packed again in another Angular lib.

ng build xxxlib

ERROR: xxx.module.ts:36:1: Error encountered in metadata generated for exported symbol 'XxxxxModule': xxxx.module.ts:33:10: Metadata collected contains an error that will be reported at runtime: Expression form not supported. {"symbolic":"error","message":"Expression form not supported","line":32,"character":9} An unhandled exception occurred: XXXX.module.ts:36:1: Error encountered in metadata generated for exported symbol 'XxxxxModule': Metadata collected contains an error that will be reported at runtime: Expression form not supported. {"symbolic":"error","message":"Expression form not supported","line":32,"character":9}

[pierrebonny]

Did someone find a solution for this issue ? @xieziyu any idea ? thx

[Emanuele-Moolan]

Every other solutions worked only on locally for me , But this one really fixed the build even in aws-prod

// replace import * as echarts from 'echarts';
export function echarts() {
  return import('echarts');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxEchartsModule.forRoot({
      echarts,
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})