Tree-shaking Not Working as Expected in ngx-echarts v18 with Angular v18

Description

I have noticed that tree-shaking is not working as expected in the latest version of ngx-echarts (v18) with Angular v18. The bundle size remains the same whether I use the full build or a custom build of ngx-echarts.

Steps to Reproduce

Custom build

// app.component.ts

import { Component } from '@angular/core';  
import { RouterOutlet } from '@angular/router';  

import {NgxEchartsDirective, provideEchartsCore} from "ngx-echarts";  
import {EChartsOption} from "echarts";  
import * as echarts from "echarts/core";  
import {BarChart} from "echarts/charts";  
import {  
  DatasetComponent,  
  GridComponent,  
  TitleComponent,  
  TooltipComponent,  
  TransformComponent  
} from "echarts/components";  
import {LabelLayout, UniversalTransition} from "echarts/features";  
import {CanvasRenderer} from "echarts/renderers";  

echarts.use([  
  BarChart,  
  TitleComponent,  
  TooltipComponent,  
  GridComponent,  
  DatasetComponent,  
  TransformComponent,  
  LabelLayout,  
  UniversalTransition,  
  CanvasRenderer  
]);  

@Component({  
  selector: 'app-root',  
  standalone: true,  
  imports: [RouterOutlet, NgxEchartsDirective],  
  templateUrl: './app.component.html',  
  styleUrl: './app.component.css',  
  providers: [  
    provideEchartsCore({ echarts })  // Importing the custom build
  ]  
})  
export class AppComponent {  
  chartOptions: EChartsOption | null = {  
    xAxis: {  
      type: 'category',  
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  
    },  
  yAxis: {  
      type: 'value'  
  },  
  series: [  
      {  
        data: [120, 200, 150, 80, 70, 110, 130],  
  type: 'bar'  
  }  
    ]  
  };  
}

Full build

// app.component.ts

import { Component } from '@angular/core';  
import { RouterOutlet } from '@angular/router';  

import {NgxEchartsDirective, provideEcharts} from "ngx-echarts";  
import {EChartsOption} from "echarts";  

@Component({  
  selector: 'app-root',  
  standalone: true,  
  imports: [RouterOutlet, NgxEchartsDirective],  
  templateUrl: './app.component.html',  
  styleUrl: './app.component.css',  
  providers: [  
    provideEcharts() // Importing the full build
  ]  
})  
export class AppComponent {  
  chartOptions: EChartsOption | null = {  
    xAxis: {  
      type: 'category',  
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  
    },  
  yAxis: {  
      type: 'value'  
  },  
  series: [  
      {  
        data: [120, 200, 150, 80, 70, 110, 130],  
  type: 'bar'  
  }  
    ]  
  };  
}

Build the project:

ng build --configuration production

Compare the bundle sizes when using the full build versus the custom build.

Expected Behavior

The bundle size should be smaller when using a custom build compared to the full build, due to tree-shaking removing unused parts of the library.

Actual Behavior

The bundle size remains the same regardless of whether the full build or a custom build is used.

Results

Bundle size with full build

Bundle size with custom build

Versions

ngx-echarts: 18.0.0
Angular: 18.1.0
Node: 18.x
npm: 10.x

Conclusion

It appears that tree-shaking is not reducing the bundle size as expected. I would appreciate any guidance or fixes to resolve this issue. Thank you!

xieziyu / ngx-echarts