Bring in Highcharts along with highcharts-more using AngularJS 1.5, TypeScript, and webpack

Question

Bring in Highcharts along with highcharts-more using AngularJS 1.5, TypeScript, and webpack

Currently, I am attempting to integrate Highcharts with some of its extensions, such as "highcharts-more," into a project that utilizes webpack, TypeScript, and AngularJS (version 1.5).

I have successfully installed Highcharts via npm (https://www.npmjs.com/package/highcharts). However, I am encountering difficulties when trying to import the bundled extensions.

My current solution involves setting global variables in the webpack configuration file:

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

and manually extending Highcharts:

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);

without any direct imports. Unfortunately, TypeScript is throwing errors due to this workaround:

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

Interestingly, there are no issues with importing just Highcharts itself using:

import * as Highcharts from 'highcharts';

As an alternative, I would prefer to cleanly import each module separately, for example:

import {HighchartsMore} from 'highcharts-more';

Any suggestions or insights on how to achieve this would be greatly appreciated.

angularjs highcharts typescript webpack

Answer 1

Answer №1

If you encounter this kind of error, it may be due to missing definition files for exported variables. Highcharts extensions still rely on them - for more information on importing modules without d.ts, check out this link as the requirements might change in the future.

To resolve the issue, you will need to create a d.ts file for the extensions. Here is an example file for highcharts-more:

/// <reference path="index.d.ts" />

declare var HighchartsMore: (H: HighchartsStatic) => HighchartsStatic;

declare module "highcharts/highcharts-more" {
    export = HighchartsMore;
}

The reference path should point to the standard DefinitelyTyped Highcharts file located here. This allows for proper typing when initializing the extension:

HighchartsMore(Highcharts);

Lastly, remember to include all d.ts files either by configuring tsconfig or by specifying reference paths in your files.

Answer 2

If you encounter this kind of error, it may be due to missing definition files for exported variables. Highcharts extensions still rely on them - for more information on importing modules without d.ts, check out this link as the requirements might change in the future.

To resolve the issue, you will need to create a d.ts file for the extensions. Here is an example file for highcharts-more:

/// <reference path="index.d.ts" />

declare var HighchartsMore: (H: HighchartsStatic) => HighchartsStatic;

declare module "highcharts/highcharts-more" {
    export = HighchartsMore;
}

The reference path should point to the standard DefinitelyTyped Highcharts file located here. This allows for proper typing when initializing the extension:

HighchartsMore(Highcharts);

Lastly, remember to include all d.ts files either by configuring tsconfig or by specifying reference paths in your files.

Answer 3

Answer №2

To update your webpack configuration, you need to make the following changes:

Remove the lines below from your webpack.config.js file:

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

Next, install the typings file for Highcharts by running the following command:

npm install --save @types/highcharts

Finally, adjust your import statements as shown below:

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

Answer 4

To update your webpack configuration, you need to make the following changes:

Remove the lines below from your webpack.config.js file:

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

Next, install the typings file for Highcharts by running the following command:

npm install --save @types/highcharts

Finally, adjust your import statements as shown below:

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

Bring in Highcharts along with highcharts-more using AngularJS 1.5, TypeScript, and webpack

Answer №1

Answer №2

Similar questions

Placing JSON Reply into a Select Menu

Leveraging aws-sdk within a TypeScript, jQuery, and webpack application

The issue with type checking being disrupted when importing from a TypeScript file

Modify the value within the Date Selector upon explicit deletion

Receiving an error with React Proptypes when using the union type Breakpoint

What is the best way to successfully pass the desired value to the Angular 4 controller by clicking the button?

React throwing an error when trying to use inline fontWeight styling with Typescript

Issue encountered during production mode compilation: "Vue Laravel Mix" is not a valid function

It is impossible to declare a class attribute that has the same type as the class itself, creating a self-referencing hierarchy

Neglecting to set the lint parserOptions.project configuration to the project's tsconfig.json file following the migration to Angular

Accessing file uploads in Angular 2

Why do we need the TypeScript ts-jest pre-processor?

When using Yeoman and Bower to scaffold a fresh Angular application, Eclipse runs out of memory

I lost my hovering tooltip due to truncating the string, how can I bring it back in Angular?

Retrieve values from a nested object using a variable in AngularJS

Utilize Typescript with React to efficiently destructure and spread objects

The argument provided is a string type, which cannot be assigned to a parameter expecting an object with a 'results' property of type string

When I apply flex to the display of .ant-steps-item-icon, the connection between the steps vanishes

How can I remove specific items from a PrimeNG PickList?

Create a Container for Your Designs