angular2-highcharts 및 AOT 컴파일러를 사용하여 exporting.js 및 export-data.js를 가져 오는 방법은 무엇입니까?

Question

나는 angular2-highcharts를 사용하고 있으며 내 차트는 정상적으로 작동하지만 차트를 XLS로 내 보내야합니다.

내가 이것을 달성하는 데 필요한 모든

코드 어딘가에

HighchartsExporting(Highcharts); 
HighchartsExportData(Highcharts); 

을하고있다, 그리고 내보내기 옵션 차트로 표시됩니다.

문제는 standard solution

@NgModule({ 
    imports: [ 
     BrowserModule, 
     ChartModule.forRoot(
     require('highcharts'), 
     require('highcharts/modules/exporting') 
     ], 

가 AOT와 함께 작동하지 않기 때문에 나에게주고, 제대로 HighchartsExporting 및 HighchartsExportData을 가져 오는 방법을 일부 컴파일시에 "오류 정적 심볼 값을 해결 발생".

나는 그것이 here 제안

import * as HichartsExporting from 'highcharts/modules/exporting'; 
import * as HighchartsExportData from 'highcharts/modules/export-data'; 

을 수행하여 작동시킬 수 있지만, 그것은 나에게이 오류 제공 : 수출/모듈 ' "XXXX/highcharts/모듈 :

• 오류 TS2497을 " '는 을 모듈이 아닌 항목으로 해석하므로이 구문을 사용하여 가져올 수 없습니다. - JIT 컴파일
• 'highcharts/modules/export-data'모듈을 찾을 수 없습니다.-here 제안

  import HichartsExporting = require('highcharts/modules/exporting'); 
  import HighchartsExportData = require('highcharts/modules/export-data'); 
  

  을 수행하여 AOT 컴파일

나는이 문제를 해결받을 수 있지만, AOT 컴파일 후, 내가 얻을이 : 런타임에 "catch되지 않은 오류 ReferenceError는을 정의되지 않은이 필요합니다."

모든 솔루션이 실제로 제대로 작동하는 것 같습니다. 단지 컴파일 할 수 없습니다. 어떤 제안이라도 환영합니다.

당신은 HighchartsModule(Highcharts) 같은로드 된 모든 모듈 Highcharts의 인스턴스를 생성하고 angular2-highcharts docs에 설명 된대로 다음 forRoot 함수에 인스턴스를 통과 할 수

Answer 1

, 나는 수입을 사용 할 수 없었다. 대신 내 HTML에 <script src="~/node_modules/highcharts/modules/exporting.js"> 태그를 포함시켜야했습니다. 이 JS는 자체 호출 함수이기 때문에 작동시키는 데 필요한 모든 것입니다.

Answer 2

.

require 또는 import을 사용하여 모듈을로드 할 수 있어야합니다. 언급 된 문서의

import * as Highcharts from 'highcharts'; 
require('highcharts/modules/exporting')(Highcharts); 

또는

import * as Highcharts from 'highcharts'; 
import * as HC_exporting from 'highcharts/modules/exporting'; 
HC_exporting(Highcharts); 

과 같은 다음과 같은

:

이 사람을 도움이 그냥 경우

@NgModule({ 
    ... 
    imports: [ 
     BrowserModule, 
     ChartModule.forRoot(
-  require('highcharts'), 
+  Highcharts 
    ) 
    ], 
})