Getting build issue while updating echart-v 4.9 to 5.0

[BalaRajendran]

Team, I'm getting an error when I trying to do production build. But in development build, it's working fine. With version of echart - ^4.9.0 its working fine

My Package version:

"echarts": "^5.0.0",
"ngx-echarts": "^5.2.1",

Module

import { NgModule } from '@angular/core';
import { CommonModule, registerLocaleData } from '@angular/common';
import { ChartViewComponent } from './chart-view.component';
import { NgxEchartsModule } from 'ngx-echarts';
import * as echarts from 'echarts';
import en from '@angular/common/locales/en';

import 'echarts/theme/macarons.js';

registerLocaleData(en);

@NgModule({
  declarations: [ChartViewComponent],
  exports: [ChartViewComponent],
  imports: [
    CommonModule,
    NgxEchartsModule.forRoot({ echarts }),
  ],
})
export class ChartViewModule {}

ERROR in ./src/app/pages/search-analyze/search-analyze.module.ngfactory.js
Module not found: Error: Can't resolve 'echarts/types/dist/echarts' in 'C:\Users\karur\Desktop\project\angular\test-project\src\app\pages\search-analyze'
resolve 'echarts/types/dist/echarts' in 'C:\Users\karur\Desktop\project\angular\test-project\src\app\pages\search-analyze'
  Parsed request is a module
  using description file: C:\Users\karur\Desktop\project\angular\test-project\package.json (relative path: ./src/app/pages/search-analyze)    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in C:/Users/karur/Desktop/project/angular/test-project/
        using description file: C:\Users\karur\Desktop\project\angular\test-project\package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\karur\Desktop\project\angular\test-project\package.json (relative path: ./echarts/types/dist/echarts)
           no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\karur\Desktop\project\angular\test-project\echarts\types\dist\echarts doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\karur\Desktop\project\angular\test-project\echarts\types\dist\echarts.ts doesn't exist
            .tsx

[srimathikarur]

I'm too facing this same issue in 5.0 version

[nicolalopatriello]

Any news? Thanks!

[xieziyu]

Try to import echarts like:

import { NgModule } from '@angular/core';
import { CommonModule, registerLocaleData } from '@angular/common';
import { ChartViewComponent } from './chart-view.component';
import { NgxEchartsModule } from 'ngx-echarts';
- import * as echarts from 'echarts';
import en from '@angular/common/locales/en';

import 'echarts/theme/macarons.js';

registerLocaleData(en);

@NgModule({
  declarations: [ChartViewComponent],
  exports: [ChartViewComponent],
  imports: [
    CommonModule,
-    NgxEchartsModule.forRoot({ echarts }),
+    NgxEchartsModule.forRoot({ echarts: () => import('echarts') }),
  ],
})
export class ChartViewModule {}

[Balajirpurplelslate]

Try to import echarts like:

import { NgModule } from '@angular/core';
import { CommonModule, registerLocaleData } from '@angular/common';
import { ChartViewComponent } from './chart-view.component';
import { NgxEchartsModule } from 'ngx-echarts';
- import * as echarts from 'echarts';
import en from '@angular/common/locales/en';

import 'echarts/theme/macarons.js';

registerLocaleData(en);

@NgModule({
  declarations: [ChartViewComponent],
  exports: [ChartViewComponent],
  imports: [
    CommonModule,
-    NgxEchartsModule.forRoot({ echarts }),
+    NgxEchartsModule.forRoot({ echarts: () => import('echarts') }),
  ],
})
export class ChartViewModule {}

Tried but getting while doing production build

ERROR in src/app/components/chart-view/chart-view.module.ts(19,41): Error during template compile of 'ɵ0' Function expressions are not supported in decorators Consider changing the function expression into an exported function.

[BanannaLopal]

Any news?

[Balajirpurplelslate]

Any news?

Nothing @BanannaLopal

[zliebersbach]

I have found a workaround, put the following before your module definition:

export function loadEcharts() {
  return import('echarts');
}

And then use this to import echarts:

NgxEchartsModule.forRoot({
  echarts: loadEcharts
})

[KhanyiTheGreat]

Even with @zliebersbach the error persists.

[jcstrachan]

Even with @zliebersbach the error persists.

+1 on this. Any solution found yet?