How do I use an Highcharts Solid Gauge in angular 6 with typescript?

Question

In my current project I'm using Angular 6 and typescript. My plan is to use an Solidgauge on one of my Components. During the production of my compentent I run into the following problems:

When i try to display the Gauge on my display nothing shows and in console Highcharts error #17 is showing. My suspiscion is that the cause of my problem lies in the way I'm importing Highcharts-more in my component.

My thoughput.component.ts file

import { Component, OnInit, OnDestroy, Input} from '@angular/core';
import { UsageService } from '../../services/UsageService';
import { Subscription } from 'rxjs';
import * as Highcharts from 'highcharts/highcharts';
import 'highcharts/modules/exporting';
import * as more from 'highcharts-more/more';
import * as solidgauge from 'highcharts/modules/solid-gauge';
more(Highcharts);

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

export class ThroughputComponent implements OnInit, OnDestroy {
  // private updataDataEndRef: Subscription = null;
  public messageCount: number;
  public chart: any;
 // @Input() usageService: UsageService;

 constructor() {
   this.messageCount = 0;
 }

 ngOnInit(): void {
   this.initChart(this.buildGauge());
 }

 ngOnDestroy() {
   // this.updataDataEndRef.unsubscribe();
 }

 // noinspection JSMethodCanBeStatic
 private buildGauge(): any {
    return {
      chart: {
        type: 'solidgauge'
      },
      title: null,
      pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) 
        || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
       }
    },
    tooltip: {
      enabled: false
    },
    yAxis: {
      stops: [
        [0.1, '#55BF3B'],
        [0.5, '#DDDF0D'],
        [0.9, '#DF5353']
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickAmount: 2,
      title: {
        y: -70
      },
      labels: {
        y: 16
      }
    },
    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: 5,
          borderWidth: 0,
          useHTML: true
        }
      }
    }
  };
}

private initChart(gaugeOptions: any) {
  this.chart = Highcharts.chart('gauge-container', 
              Highcharts.merge(gaugeOptions, {
   yAxis: {
     min: 0,
     max: 200,
     title: {
       text: 'Speed'
     }
   },
   credits: {
     enabled: false
   },
   series: [{
     name: 'Speed',
     data: [80],
     dataLabels: {
       format: '<div style="text-align:center"><span style="font- 
                   size:25px;color:' +
                   ((Highcharts.theme && Highcharts.theme.contrastTextColor) 
                    || 'black') + '">{y}</span><br/>' +
               '<span style="font-size:12px;color:silver">km/h</span></div>'
      },
      tooltip: {
        valueSuffix: ' km/h'
      }
    }]
  }));
}

My thoughput.component.html file

<div id='gauge-container' style="width: 300px; height: 200px"></div>

My app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform- 
         browser/animations';
import { MatCardModule, MatButtonModule, MatGridListModule } from        
       '@angular/material';
import { RouterModule } from '@angular/router';
import { AngularFontAwesomeModule } from 'angular-font-awesome';

import { GatewayService } from './services/GatewayService';
import { AppComponent } from './components/app/app.component';
import { GatewayComponent} from './components/gateway/gateway.component';
import { GatewayControlComponent} from 
           './components/gatewaycontrol/gatewaycontrol.component';
import { TopmenuComponent} from './components/topmenu/topmenu.component';
import { SidemenuComponent} from './components/sidemenu/sidemenu.component';
import { GatewayDataDisplayComponent} from 
       './components/gatewaydatadisplay/gatewaydatadisplay.component';
import { ThroughputComponent } from 
       './components/throughputdisplay/throughput.component';

@NgModule({
  declarations: [
     AppComponent,
     GatewayComponent,
     TopmenuComponent,
     SidemenuComponent,
     GatewayControlComponent,
     GatewayDataDisplayComponent,
     ThroughputComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     MatCardModule,
     MatButtonModule,
     MatGridListModule,
     RouterModule.forRoot([
       { path: '', redirectTo: 'home', pathMatch: 'full' },
       { path: 'home', component: AppComponent },
       { path: 'control', component: GatewayControlComponent},
       { path: 'gateways', component: GatewayComponent },
       { path: '**', redirectTo: 'home' }
     ])
   ],
   providers: [GatewayService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

Please can someone tell me what I'm doing wrong here? Or is there something I forgot to do?

Ps. In the current version of my code I tried to install highcharts-more and hightcharts separately by using npm.

Answer 1

Include all:

• highcharts
• highcharts-more
• solid-gauge module

For example:

import * as Highcharts from 'highcharts/highcharts';
import * as HighchartsMore from 'highcharts/highcharts-more';
import * as HighchartsSolidGauge from 'highcharts/modules/solid-gauge';

// Now init modules:
HighchartsMore(Highcharts);
HighchartsSolidGauge(Highcharts);