Error installing Highcharts Dashboard on Angular 14

I'm trying to implement Highcharts Dashboards on Angular 14.

I'm following this example that's in Angular 16 but my assumption is that it should be the same in both versions.

I create a new application in Angular 14:

npx ng new angular-app

Then install highcharts and the dashboard:

cd angular-app
npm install @highcharts/dashboards
npm install highcharts
npm i --save-dev @types/highcharts

I add to the component the import:

import * as Dashboards from '@highcharts/dashboards/dashboards';

When I start the angular application with ng serve I get this error:

Error: node_modules/@highcharts/dashboards/es-modules/Dashboards/Plugins/HighchartsTypes.d.ts:1:35

error TS7016: Could not find a declaration file for module 'highcharts/es-modules/Core/Globals'. 'C:/angular-app/node_modules/highcharts/es-modules/Core/Globals.js' implicitly has an 'any' type. Try npm i --save-dev @types/highcharts if it exists or add a new declaration (.d.ts) file containing declare module 'highcharts/es-modules/Core/Globals';

1 import type { default as H } from 'highcharts/es-modules/Core/Globals'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I have @types/highcharts installed, but still getting the error. How to fix this?

Solution

Are you sure you are importing all the necessary elements? Just before importing dashboards, you should import Highcharsts. Plus there is no need to add @types/highcharts, the npm page of this package says that it is deprecated, highcharts provide its own type definitions, so you do not need this installed.

Docs: https://www.highcharts.com/docs/dashboards/dashboards-with-angular