I am having an issue integrating DrillDown from Highcharts with Angular 19

I am integrating DrillDown from Highcharts into my angular 19 application.

Here is the error I get from the browser console: ERROR TypeError: Ye(...) is not a function

Here are the libraries I install:

1. "highcharts": "^12.1.2".
2. "highcharts-angular": "^4.0.1"


What I did on my drilldown-chart.component.ts:

import {Component, OnInit} from '@angular/core';
import * as Highcharts from 'highcharts';
import Drilldown from 'highcharts/modules/drilldown';
import { HighchartsChartModule } from "highcharts-angular";
// Initialize the drilldown module
Drilldown(Highcharts);

@Component({
selector: 'app-drilldown-chart',
imports: [HighchartsChartModule],
templateUrl: './drilldown-chart.component.html',
styleUrl: './drilldown-chart.component.scss'
})
export class DrilldownChartComponent implements OnInit {


ngOnInit(): void {
this.loadChart()
}

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

loadChart(): void {
this.chartOptions = {
// In here is my chart details
};
}
}


And this in my drilldown-chart.component.html:

<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;">
</highcharts-chart>


I have try using the Pie and Line charts can it works as expected.

But when I introduce this Drilldown(Highcharts); the page no longer loads.

Continue reading...