Ng2-charts: Add way to remove moment from build

[almgwary]

Moment js increase the bundle size, add option to remove it while build

Moment.js is installed along Chart.js as dependency. If you don't want to use Moment.js (either because you use a different date adapter or simply because don't need time functionalities), you will have to configure your bundler to exclude this dependency (e.g. using externals for Webpack or external for Rollup).

https://github.com/chartjs/Chart.js/blob/f2b099b835bf5d6dfe3a7d3097997ec11983c3ed/docs/getting-started/integration.md#L28

[almgwary]

@paviad check this

[paviad]

I am not proficient in webpack, moment is indeed a part of chart.js therefore I have no easy way to get rid of it in ng2-charts...

[almgwary]

You can import standalone version - not bundled one with the following line:

import Chart from 'chart.js/dist/Chart.js'

Or setting alias

resolve: {
    alias: {
      'chart.js': 'chart.js/dist/Chart.js'
    }
}

[paviad]

But I do not include chart.js as a dependency but as a peer dependency - so it is up to the user to include all of chart.js or just the bare package without the bundle.

[almgwary]

But I do not include chart.js as a dependency but as a peer dependency - so it is up to the user to include all of chart.js or just the bare package without the bundle.

you should change the chart.js import at base-chart.directive
to be like this

import * as chartJs from 'chart.js/dist/Chart.bundle.js'

this should solve the problem

[naveedahmed1]

Any update on this? This can save 574.32 Kb. With chart.js 2.8 it should now be possible.
https://github.com/chartjs/Chart.js/pull/5960

I would also like to know if we can also remove lodash.js dependency?

[M-Blobby]

I'm also interested about any update. I'm in the same situation with naveedahmed1.

[AceVentura]

Hello,

Any updates on this?

[almgwary]

Hello,

Any updates on this?

Copy the base directive in your project and apply the following update

https://github.com/valor-software/ng2-charts/issues/1108#issuecomment-490383242

[AceVentura]

Hello,
Any updates on this?

Copy the base directive in your project and apply the following update

#1108 (comment)

That would require me to copy the code from github. I'm using the npm package

[paviad]

Wait, what is wrong with this import in base-chart.directive.ts:

import {
  Chart,
  ChartConfiguration,
  ChartDataSets,
  ChartOptions,
  ChartPoint, ChartType,
  PluginServiceGlobalRegistration,
  PluginServiceRegistrationOptions,
  pluginService
} from 'chart.js';

[AlecDusheck]

You can use a custom webpack configuration to mark moment as an external package. This can be accomplished by installing/configuring the @angular-builders/custom-webpack package and then including this custom webpack config:

module.exports = {
  externals: {
    moment: 'moment',
  },
}