How to import highchart-more into angular-cli 6 project

Question

In my angular-cli 6 project I'm using highcharts for creating a solid-gauge. But I received this error https://www.highcharts.com/errors/17 . So in order to work I have to add highcharts-more.js file to my component.

I'm using the following npm packages for highcharts.

• npm install highcharts
• npm install --save-dev @types/highcharts (because VS Code suggested me when i tried to import highcharts)

Here is the code for my component together with the imports:

import {
  AfterViewInit,
  Component,
  ElementRef,
  Injector,
  OnInit,
  ViewChild
} from '@angular/core';
import * as Highcharts from 'highcharts';
import { chart } from 'highcharts';
import highchartsMore from 'highcharts/highcharts-more';
import { AbstractDashboardCard } from '../../models/abstract-dashboard-card';
import { DashboardCard } from '../../models/dashboard-card';

highchartsMore(Highcharts);
@Component({
  selector: 'app-luchtkwaliteit',
  templateUrl: './luchtkwaliteit.component.html',
  styleUrls: ['./luchtkwaliteit.component.css']
})
export class LuchtkwaliteitComponent extends AbstractDashboardCard
  implements OnInit, AfterViewInit {
  @ViewChild('chartTarget') chartTarget: ElementRef;
  chart: Highcharts.ChartObject;

  constructor(private injector: Injector) {
    super(
      injector.get(DashboardCard.metadata.NAME),
      injector.get(DashboardCard.metadata.SOURCE),
      injector.get(DashboardCard.metadata.COLS),
      injector.get(DashboardCard.metadata.ROWS)
    );
  }

  ngOnInit() {}

  ngAfterViewInit() {
    const gaugeOptions = {
      chart: {
        type: 'solidgauge'
      },
      title: null,
      pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
          backgroundColor: '#EEE',
          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc'
        }
      },
      tooltip: {
        enabled: false
      },
      // the value axis
      yAxis: {
        stops: [
          [0.1, '#55BF3B'], // green
          [0.5, '#DDDF0D'], // yellow
          [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        min: 0,
        max: 200,
        title: {
          y: -70,
          text: 'Speed'
        },
        labels: {
          y: 16
        }
      },
      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: 5,
            borderWidth: 0,
            useHTML: true
          }
        }
      },
      credits: {
        enabled: false
      },
      series: [
        {
          name: 'Speed',
          data: [80],
          dataLabels: {
            format:
              '<div style="text-align:center"><span style="font-size:25px;color: black' +
              '">{y}</span><br/>' +
              '<span style="font-size:12px;color:silver">km/h</span></div>'
          },
          tooltip: {
            valueSuffix: ' km/h'
          }
        }
      ]
    };
    this.chart = chart(this.chartTarget.nativeElement, gaugeOptions);
  }
}

So I already did some investigation how I could add highcharts-more but didn't find a solution. Things I found:

• npm install highcharts-more but it's deprecated so I didn't use it https://www.npmjs.com/package/highcharts-more
• import * as highchartsMore from 'highcharts/highcharts-more'; TS error "node_modules/@types/highcharts/highcharts-more" resolves to a non-module entity and cannot be imported using this construct.
• import * as highchartsMore from 'highcharts'; TS Error on highchartsMore(Highcharts); Cannot invoke an expression whose type lacks a call signature. Type 'Static' has no compatible call signatures.
• highcharts-angular Didn't use it because issues with angular 6 https://github.com/highcharts/highcharts-angular/issues/29

Answer 1

In order to use solid-gauge series type, first you need to import appropriate module.

import * as Highcharts from 'highcharts'
import * as solidGauge from 'highcharts/modules/solid-gauge'

solidGauge(Highcharts)

Answer 2

这就是我在Angular 5项目中导入它的方式，似乎工作正常。

require('highcharts/highcharts-more')(Highcharts);

Answer 3

I am using solidGauge with Angular 6 and needed to remove all "requires" statements for HighCharts. After much mucking about I got this to work for more complex charts. The trick is to add .src to the Imports that give you an error.
This is a working example:

In the module:

import * as Highcharts from 'highcharts'; 
//*****  add .src to the following imports that won't import otherwise  ********
import * as more from 'highcharts/highcharts-more.src';  
import * as solidGauge from 'highcharts/modules/solid-gauge';  
import * as exporting from 'highcharts/modules/exporting.src';    
import * as exportdata from 'highcharts/modules/export-data.src';    
import * as offlineexporting from 'highcharts/modules/offline-exporting.src';     


more(Highcharts);  
solidGauge(Highcharts);  
exporting(Highcharts);    
exportdata(Highcharts);    
offlineexporting(Highcharts);     

In the component:

    import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core'; 
    import { chart } from 'highcharts';

    export class GaugeData {
      public width: number;
      constructor(  public title: string, public value: number, public color: string) { }
    }


    @Component({
        selector: 'radialgauge',
        template: `
            <div #chartTarget> </div>
        `
    })
    export class GaugeComponent {
        @ViewChild('chartTarget') chartTarget: ElementRef;
        @Input() data: GaugeData;  
        public thisdata: GaugeData;
        public options: Object;
        public chartwidth: number = 250;
        public chartheight: number = 200;
        public topmargin:number= 50;
        public center: string[] = ['50%', '50%'];
        chart1: Highcharts.ChartObject;

        constructor() {
            this.thisdata = new GaugeData('',0,'#000')
        };

        ngOnChanges() {
            this.thisdata = this.data;
            this.setOptions(this.thisdata);
            this.chart1 = chart(this.chartTarget.nativeElement, this.options);
        }

        ngOnInit() {
            this.thisdata = this.data;
            this.chartwidth = this.width;
            if (this.height) {
                this.chartheight = this.height;
            }
            if (!this.showtitle) {
                this.thisdata.title = '';
                this.topmargin = 0;
                this.center = ['30%', '55%'];
            }
            this.setOptions(this.thisdata);
            this.chart1 = chart(this.chartTarget.nativeElement, this.options);
        }

        setOptions(newData: GaugeData) {

            this.options = {
                chart: {
                    type: 'solidgauge',
                    marginTop: this.topmargin,
                    backgroundColor: "none",
                    height: this.chartheight,
                    width: this.chartwidth
                },
                credits: { enabled: false },
                exporting: {
                    enabled: false,
                    showTable: false
                },
                title: {
                    text: newData.title,
                    style: {
                        fontSize: '12px', color: "#fff", fontfamily: "Arial", width:"200px"
                    },
                },
                tooltip: { enabled: false },
                pane: {
                    startAngle: 0,
                    endAngle: 360,
                    background: [{ // Track for Move
                        outerRadius: '115%',
                        innerRadius: '0%',
                        backgroundColor: "rgba(74, 70, 66, 1)",
                        borderWidth: 0
                    }],
                    center: this.center,
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    lineWidth: 0,
                    tickPositions: [],
                    color: "#fff",
                    title: {
                        text: '<span style="font-size:36px;color:white;font-family: \'Arial\'">' + newData.value + '%</span>',
                        x: 5,
                        y: 43
                    }
                },
                plotOptions: {
                    solidgauge: {
                        dataLabels: {
                            enabled: false
                        },
                        stickyTracking: false
                    }
                },
                series: [{
                    data: [{
                        color: newData.color,
                        radius: '115%',
                        innerRadius: '105%',
                        y: newData.value
                    }]
                }]
            }

        }
    }