Is it possible to work with highcharts / highmaps / highstock importing seperately?

[hijiangtao]

Currently, angular-highcharts will import all these three things internally, such as highmaps in https://github.com/cebor/angular-highcharts/blob/0b4c5fcb417b0c8731c7d8b8f54f40a45a246e60/projects/angular-highcharts/src/lib/mapchart.ts#L3

and it couldn't let angular-highcharts utilize the efficiency of something like tree shaking.

However, the build bundle is too large for me if I just want to use highcharts for simple charts' visualization.

In this case, if I just ignore highmaps or highstock namespace in webpack bundling (such as webpack.IgnorePlugin), I could get a smaller bundle size but when I run it, it would trigger errors like these:

Error: Cannot find module 'highcharts/highmaps' ...

So, is there some official support for it or some other workarounds? Thanks.

[murdocha]

This is still an issue in Feb 2022 with the latest npm package for angular-highcharts (currently at v. 13.0.1) In our app (updated to Angular 13 version), we only want the "core" highcharts modules, but we get the gantt, stock, and maps charting modules as well. That is probably about 1/3 of the full bundle size...

Maybe this is happening in the chart.directive.ts file here (where it imports map, gantt, and stock highcharts modules):

https://github.com/cebor/angular-highcharts/blob/e01b8842a58fb45a1a7d6c919f799466e00e355a/projects/angular-highcharts/src/lib/chart.directive.ts#L11

This open PR (from @finn-wa) attempted to address the issue, but maybe adds some complexity? https://github.com/cebor/angular-highcharts/pull/372

The core v.13 code seems to have moved on from that point, though. That PR seems to have languished since mid-2021...

[murdocha]

Using: @angular/core: 13.2.2 @angular/cli: 13.2.3 highcharts: 9.3.3 angular-highcharts: 13.0.1

Maybe this build log info will be helpful? When building this (with Angular 13) I get this warning message (where "OceanReports" is our app name):

> ng build --configuration=production --output-path=build --base-href=/build/

⠹ Generating browser application bundles (phase: setup)...

Warning: Entry point 'angular-highcharts' contains deep imports into 
'c:/projects/OceanReports/frontend/node_modules/highcharts/highmaps',
'c:/projects/OceanReports/frontend/node_modules/highcharts/highstock',
'c:/projects/OceanReports/frontend/node_modules/highcharts/highcharts-gantt'. 

This is probably not a problem, but may cause the compilation of entry points 
to be out of order.

[hijiangtao]

@murdocha maybe you can try https://github.com/hijiangtao/ng-highcharts this, I just migrated it from angular-highcharts, but only import pure highcharts from highcharts.js to reduce final bundle size.

[willyboy]

In Angular, you can use file replacements to replace these files with an empty file. It's a hack but it will help.

[hijiangtao]

@willyboy That's nice!