title: How to import highchart-more into angular-cli 6 project
body: <p>In my angular-cli 6 project I'm using highcharts for creating a solid-gauge. But I received this error <a href="https://www.highcharts.com/errors/17" rel="nofollow noreferrer">https://www.highcharts.com/errors/17</a>. So in order to work I have to add highcharts-more.js file to my component. </p>
  
  <p>I'm using the following npm packages for highcharts.</p>
  
  <ul>
  <li>npm install highcharts </li>
  <li>npm install --save-dev @types/highcharts (because VS Code suggested me when i tried to import highcharts)</li>
  </ul>
  
  <p>Here is the code for my component together with the imports:</p>
  
  <pre><code>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:
                '&lt;div style="text-align:center"&gt;&lt;span style="font-size:25px;color: black' +
                '"&gt;{y}&lt;/span&gt;&lt;br/&gt;' +
                '&lt;span style="font-size:12px;color:silver"&gt;km/h&lt;/span&gt;&lt;/div&gt;'
            },
            tooltip: {
              valueSuffix: ' km/h'
            }
          }
        ]
      };
      this.chart = chart(this.chartTarget.nativeElement, gaugeOptions);
    }
  }
  </code></pre>
  
  <p>So I already did some investigation how I could add highcharts-more but didn't find a solution. Things I found:</p>
  
  <ul>
  <li>npm install highcharts-more <strong>but it's deprecated so I didn't use it</strong> <a href="https://www.npmjs.com/package/highcharts-more" rel="nofollow noreferrer">https://www.npmjs.com/package/highcharts-more</a></li>
  <li>import * as highchartsMore from 'highcharts/highcharts-more'; <strong>TS error "node_modules/@types/highcharts/highcharts-more" resolves to a non-module entity and cannot be imported using this construct.</strong></li>
  <li>import * as highchartsMore from 'highcharts'; <strong>TS Error on highchartsMore(Highcharts); Cannot invoke an expression whose type lacks a call signature. Type 'Static' has no compatible call signatures.</strong></li>
  <li>highcharts-angular <strong>Didn't use it because issues with angular 6</strong> <a href="https://github.com/highcharts/highcharts-angular/issues/29" rel="nofollow noreferrer">https://github.com/highcharts/highcharts-angular/issues/29</a></li>
  </ul>