[SOLVED] Building an Angular library containing a provider for chart.js with plugins?

Building an Angular library containing a provider for chart.js with plugins?

I'm attempting to build a Angular standalone library for chart.js that will include plugins.

It seems like chart.js modifies the ChartConfiguration type when plugins are registered in order to allow for the plugin to be configured.

If chart.js did not do this linting errors would be produced as shown in this question..

So for example if the gradient plugin is registered like this:

import gradient from 'chartjs-plugin-gradient';

Chart.register(...registerables);
Chart.register(gradient);

Is there a way to export the modified chart configuration type (ChartConfiguration) from an Angular library such that clients can configure chart.js with support for plugins packaged with the provider?

This way clients would be able to import the modified configuration like this:

import { ChartConfiguration } from 'angular-chartjs-library';

And create chart.js configuration / option instances that are supported by the type namespace in ChartConfiguration.

Solution

Even if the packaged service registers the chartjs-plugin-gradient, clients that want to use it in conjunction with ChartConfiguration in order to get typed support for the plugin still need to import chartjs-plugin-gradient, because it adds the support via Typescript's Declaration Merging Feature.

So to get typing support for a plugin that is used with Chart.js simply import it like this and the support is added:

import gradient from 'chartjs-plugin-gradient';