Ng2-charts: Using with Angular CLI produces a heavy bundle size

[pauplanas]

Hi guys!

I'm using:

• angular: 4.4.6
• angluar CLI: 1.4.8
• chart.js: 2.7.0
• ng2-charts: 1.6.0

I build my app by "ng build --prod". That produces a vendor bundle of 1,05MB, without compression.

If I analyse that bundle with source-map-explorer I can see that chart.js itself is 42% of that bundle!

Take a look:

A closer look:

While Angular compiler includes chart.js inside vendor bundle I don't need to do this
<script src="node_modules/chart.js/src/chart.js"></script>
but, for me, 440 KB is not acceptable.

I'm not able excluede chart.js from bendor, so... any ideas?

Thanks!

[ryanbonial]

It looks like it was changed to import Chart from chart.js instead of using the global/existing Chart which bundles all of chart.js (and moment)
https://github.com/valor-software/ng2-charts/commit/6ed93e6c7ecd1b37388dacaff3000a39cbc1a96a#diff-cbaa749063f7b0c324b98815be16b470

[rscherer]

Hi.
This might help someone, but I was able to supress this import using webpack's alias (I don't know the exactly CLI equivalent). Something like this:

alias: { "chart.js": "chart.js/dist/Chart.min.js" }

So when bundling, instead of using full chart.js (which also imports moment) it only uses the minified version.

[paviad]

This package has been updated for Angular 7. If this issue persists, feel free to reopen.

[vlaco]

I still have this issue....
angular: 8.1
angluar CLI: 8.1
chart.js: 2.8.0
ng2-charts: 2.3.0

I have recently swiched from moment to luxon, but I still have moment in my bundle after prod build. I guess this is because of the chart.js dependency...

Not sure if I am doing something wrong or is it still a persistent problem with this library. Would be grateful for any help :)

[rscherer]

A bit late, but still may be useful for somebody.

I archieved this by using a custom webpack config (something like this: https://medium.com/angular-in-depth/customizing-angular-cli-build-an-alternative-to-ng-eject-v2-c655768b48cc). I'm currently using _Angular 9.1.9_.

Then, my extra-webpack.config.js:

const webpack = require('webpack');
module.exports = {
  resolve: {
    alias: {
      "chart.js": "chart.js/dist/Chart.min.js"
    }
  },
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
}

As a result, chart.min.js will be used, and all moment locales will be ignored.

[hardmaster92]

A bit late, but still may be useful for somebody.

I archieved this by using a custom webpack config (something like this: https://medium.com/angular-in-depth/customizing-angular-cli-build-an-alternative-to-ng-eject-v2-c655768b48cc). I'm currently using _Angular 9.1.9_.

Then, my extra-webpack.config.js:

const webpack = require('webpack');
module.exports = {
  resolve: {
    alias: {
      "chart.js": "chart.js/dist/Chart.min.js"
    }
  },
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
}

As a result, chart.min.js will be used, and all moment locales will be ignored.

After all these years this problem still exists in this library. Thanks for the suggestion, I'll try it. Could you please also help me to change the config so I can include files from the locale folder but just a few that I desire?