typescript - Cómo importar highchart-more en un proyecto de Angular 4

En mi proyecto de Angular 4 estoy usando Highcharts para un gráfico combinado de línea, columna y un gráfico de rango de área.

Estoy usando el siguiente paquete de npm para highcharts. https://github.com/highcharts/highcharts

aquí está cómo importé el módulo highcharts en el componente de typescript

import { chart } from 'highcharts';

Pero mi gráfico depende del archivo highcharts-more.js. Este archivo está presente en la carpeta node-modules > highcharts.

Siempre que estoy usando el gráfico de rango de área, obtengo el error #17, que se debe a que falta el archivo highcharts-more.

Cómo importar este módulo highcharts-more en mi componente.

Intenté require('highcharts-more') pero no sirve de nada. Porque también estoy obteniendo un error con require.

Respuesta #1

Revisa este gist: https://gist.github.com/jon-a-nygaard/f22ade93209277eea5b57c0f6ca51ea7

Esto debería funcionar:

import Highcharts from 'highcharts'
import addMore from "highcharts/highcharts-more";

addMore(Highcharts)

Resumen tomado del problema de GitHub: https://github.com/highcharts/highcharts/issues/5638

Solución alternativa:

import * as Highcharts from 'highcharts'
import * as HighchartsMore from 'highcharts/highcharts-more.src.js'
HighchartsMore(Highcharts)

Podrías simplemente usar un contenedor de Angular para Highchart, como

https://www.npmjs.com/package/angular-highcharts

O si estás usando Angular v4.0 entonces usa

https://github.com/cebor/angular-highcharts/blob/4/README.md

Mismo repositorio, pero las instrucciones son para Angular v4