ng2-highchartsの統合に関する問題

Question

私のアプリケーションでng2-highchartsを使用しようとしています。しかし、私は私のコンポーネント（directives: [Ng2Highcharts]）内のディレクティブの配列にこれらのクラスを指定しようとした場合の文

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

を使用して必要なクラスをインポートした後、私は私のコンソールで、次のエラーを取得しています。

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

私System.configは、次のようになります System.config

誰かが私がここで行方不明です何を教えてもらえますか？

Answer 1

あなたのSystemJS構成内 'NG2-highchart' を定義する必要があります。

<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 
        } 
       }] 
      }; 

     }); 

}