Import Highcharts and highcharts-more (AngularJS 1.5 + TypeScript + webpack)

Question

I'm trying to use Highcharts with some of its extensions (like "highcharts-more") in a project that uses webpack, TypeScript and AngularJS (version 1.5).

I've installed Highcharts through npm (https://www.npmjs.com/package/highcharts), but I'm not able to import the extensions that come with it.

The actual trick I'm doing is to set some global variables in the webpack config file

plugins: [ new webpack.ProvidePlugin({ Highcharts: 'highcharts', HighchartsMore: 'highcharts/highcharts-more', HighchartsExporting: 'highcharts/modules/exporting' }) ]

and extending Highcharts manually

HighchartsMore(Highcharts); HighchartsExporting(Highcharts);

without any import in between. With this non-ideal solution TypeScript is complaining because

error TS2304: Cannot find name 'HighchartsMore' error TS2304: Cannot find name 'HighchartsExporting'

In particular with Highcharts there is no error. Which I guess has to do with the fact that Highcharts is the only thing I manage to import, via

import * as Highcharts from 'highcharts';

which I can substitute with the Highchart global declaration in the webpack config. What I would like is to import every module in a clean way, something like

import {HighchartsMore} from 'highcharts-more';

Any idea is very much appreciated.

morganfree · Accepted Answer · 2016-08-09 22:37:43Z

This type of error can occur when you do not have definition files for exported variables. Those Highcharts extensions still require them - you might want to read more about importing modules without d.ts here: https://github.com/Urigo/meteor-static-templates/issues/9 - it might change in the future.

You need to create a d.ts file for the extensions. For highcharts-more this is my file:

/// <reference path="index.d.ts" /> declare var HighchartsMore: (H: HighchartsStatic) => HighchartsStatic; declare module "highcharts/highcharts-more" { export = HighchartsMore; }

reference path points to standard DefinietelyTyped Highcharts file from here https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts It allows to use type from Highcharts.d.ts because initializing will need proper typing for initializing extension:

HighchartsMore(Highcharts);

And finally don't forget to include all d.ts files by defining tsconfig or writing reference path in your files.

Thanks! I've created a pull request for that: github.com/DefinitelyTyped/DefinitelyTyped/pull/10649

Umang Khandelwal · Accepted Answer · 2018-08-19 17:48:57Z

remove these lines from webpack.config.js:

plugins: [ new webpack.ProvidePlugin({ Highcharts: 'highcharts', HighchartsMore: 'highcharts/highcharts-more', HighchartsExporting: 'highcharts/modules/exporting' }) ]

install typings file for highcharts using this:

npm install --save @types/highcharts

change your import statements to following:

import * as Highcharts from 'highcharts'; import HighchartsMore = require('highcharts/highcharts-more'); HighchartsMore(Highcharts);

Collectives™ on Stack Overflow

Import Highcharts and highcharts-more (AngularJS 1.5 + TypeScript + webpack)

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related