[Solved]-Drill Down (Highcharts) not working in Angular 5-Highcharts

In your app.module.ts import angular-charts and drilldown as below!

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as drilldown from 'highcharts/modules/drilldown.src';

imports: [ChartModule]
providers: [
  { provide: HIGHCHARTS_MODULES, useFactory: () => [more, exporting, drilldown] }   
]

In your component.ts file initialize the chart the same way you did.

If it throws out an error Property 'type' is missing in type '{ name: string; data: ((string | number)[] | { name: string; y: number; drilldown: string; })[]; }' but required in type then add type: undefined to the object. it will work as expected.

Use official npm highcharts

stackblitz demo

app.component.ts below

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, OnInit, ViewChild, ElementRef, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component } from '@angular/core';
import * as  Highcharts from 'highcharts';
import Drilldown from 'highcharts/modules/drilldown';
Drilldown(Highcharts);
// Load the exporting module.
import Exporting from 'highcharts/modules/exporting';
// Initialize exporting module.
Exporting(Highcharts);


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent implements OnInit {
  name = `Angular! v${VERSION.full}`;
  @ViewChild("container", { read: ElementRef }) container: ElementRef;

  constructor() {
  }
  ngOnInit() {
    Highcharts.chart(this.container.nativeElement, {
      // Created pie chart using Highchart
      chart: {
        type: 'pie',
        options3d: {
          enabled: true,
          alpha: 45
        }
      },
      title: {
        text: 'Contents using Pie chart'
      },
      subtitle: {
        text: '3D donut in Highcharts'
      },
      plotOptions: {
        pie: {
          innerSize: 100,
          depth: 45
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
      },
      series: [{
        name: 'Operating Systems',
        data: [
          {
            name: 'Windows',
            y: 88.19,
            drilldown: 'windows-versions'
          },
          ['MacOSX', 9.22],
          ['Linux', 1.58],
          ['Others', 1.01]
        ]
      }],
      drilldown: {
        series: [{
          name: 'Windows versions',
          id: 'windows-versions',
          data: [
            ['Win 7', 55.03],
            ['Win XP', 15.83],
            ['Win Vista', 3.59],
            ['Win 8', 7.56],
            ['Win 8.1', 6.18]
          ]
        }]
      }
    })
  }

}