xieziyu / ngx-echarts

An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)
https://xieziyu.github.io/ngx-echarts/
MIT License
1.1k stars 194 forks source link

Struggling to get treeshaking build to work #356

Open jkasperbl opened 2 years ago

jkasperbl commented 2 years ago

Please see this simplified example at https://stackblitz.com/edit/github-1mzjky-bfluyv?file=src/app/app.module.ts

With the current code, my sample line chart renders correctly. However, this is using a "full" echarts import which you cna see in app.module.ts:

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

If you comment out that line and uncomment the line above, it will instead use my attempt at a custom build:

NgxEchartsModule.forRoot({ echarts })

When I do this, I don't get any errors, but the chart no longer renders. As far as I can tell I have all of the necessary components (I would think * from echarts/core, LineChart, and `CanvasRenderer' are all that's needed for such a simple example, but it seems likely there's something else I'm missing that I'm not aware of.

Any help would be greatly appreciated in figuring this out.

xieziyu commented 2 years ago

Have you updated your example? I find your code works as expected and the chart renders correctly using custom build.

jkasperbl commented 2 years ago

@xieziyu Thanks for the response! However, no, I have not updated my example. The example code shows it working with a "full" import -- to see the issue, uncomment the top NgxEchartsModule line and comment out the one below it. Or just replace the entire contents of app.module.ts with this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
  GridComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { NgxEchartsModule } from 'ngx-echarts';
import { AppComponent } from './app.component';
import { ChartComponentModule } from './chart/chart.component';

echarts.use([
  CanvasRenderer,
  GridComponent,
  LegendComponent,
  LineChart,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
]);

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