Can't bind to 'Highcharts' since it isn't a known property of 'highcharts-chart'

Having a problem using Highcharts and highcharts-angular in a angular project.

The error is : Can't bind to 'Highcharts' since it isn't a known property of 'highcharts-chart'.

My environment versions are :

Angular CLI: 20.0.3 Node: 20.19.2 Package Manager: npm 10.8.2 OS: linux x64 Highcharts: 5.1.0

channel-tile.ts

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as Highcharts from 'highcharts';
import { HighchartsChartComponent } from 'highcharts-angular';

@component({
selector: 'app-channel-tile',
standalone: true,
imports: [CommonModule, FontAwesomeModule, HighchartsChartComponent],
templateUrl: './channel-tile.html',
styleUrl: './channel-tile.scss'
})
export class ChannelTileComponent implements OnChanges {
@input() summary!: BpmChannelSummaryDto;

Highcharts: typeof Highcharts = Highcharts;
chartOptions: Highcharts.Options = {
...


channel-tile.html

<!-- Chart goes here -->
<div class="mt-2 h-40">
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 100%; display: block">
</highcharts-chart>
</div>
</div>


My IDE tells me both [Highcharts] and [options] are :

Property Highcharts is not provided by any applicable directives nor by element.

chart-tile.html is used in dashboard.html - but they are both standalone, so I a understand the imports are in the correct files.

What is the fix?

Continue reading...