Проблема с интеграцией ng2-highcharts

Question

Я пытаюсь использовать ng2-highcharts в своем приложении. Но после того, как импортировать необходимые классы с помощью оператора

import {Ng2Highcharts, Ng2Highmaps, Ng2Highstocks} from 'ng2-highcharts/ng2-highcharts';** 

если я пытаюсь определить эти классы в массиве директив в моем компоненте (directives: [Ng2Highcharts]), я получаю следующее сообщение об ошибке в моей консоли.

[TypeError: require is not a function][1] 

Мой System.config выглядит следующим образом System.config

Может кто-нибудь сказать мне, что я здесь отсутствует?

Answer 1

Вам нужно определить 'NG2-highchart' в конфигурации SystemJS:

<script> 
    System.config({ 
    map: { 
    'ng2-highchart': 'node_modules/ng2-highchart' 
    }, 
    (...) 
    }); 
</script> 

Смотрите этот вопрос для более подробной информации:

• How to use highcharts with angular 2?

Answer 2

Удалить формат: «регистр 'из ваших пакетов. Это поможет определить правильный формат. Или вы можете добавить формат следующим образом:

System.config({ 
     packages: {   
      app: { 
      format: 'register', 
      defaultExtension: 'js' 
      }, 
      "node_modules/ng2-highcharts": { 
       format: 'cjs', 
       defaultExtension: 'js' 
       } 
     }, 
     map: { 
      "ng2-highcharts/ng2-highcharts" : "node_modules/ng2-highcharts/ng2-highcharts" 
     }, 
     paths: { 
      "ng2-highcharts/ng2-highcharts" : "node_modules/ng2-highcharts/ng2-highcharts" 
      } 
     }); 

Answer 3

Вот мой образец подсвечника ... посмотрите, поможет ли это.

import { Component } from '@angular/core'; 
import {JSONP_PROVIDERS, Jsonp} from '@angular/http'; 
import { CHART_DIRECTIVES } from 'angular2-highcharts'; 


@Component({ 
    selector: 'high-chart', 
    directives: [CHART_DIRECTIVES], 
    providers: [JSONP_PROVIDERS], 
    template: ` 
    <h2> This is HighChart CandleStick component </h2> 

     <chart type="StockChart" [options]="options3"></chart> 
    ` 
}) 

export class HighChartsComponent { 

    options3: Object; 

    constructor(jsonp : Jsonp) { 

     jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=JSONP_CALLBACK').subscribe(res => { 
      this.options3 = { 
       title : { text : 'CandleSticks' }, 
       rangeSelector : { 
        selected : 1 
       }, 
       series : [{ 
        type : 'candlestick', 
        name : 'CandleSticks', 
        data : res.json(), 
        dataGrouping : { 
        units : [ 
         [ 
          'week', // unit name 
          [1] // allowed multiples 
         ], [ 
          'month', 
          [1, 2, 3, 4, 6] 
         ] 
        ] 
       }, 
        tooltip: { 
         valueDecimals: 2 
        } 
       }] 
      }; 

     }); 

}