Angular4 Highcharts TypeError使用require答案

【问题标题】：Angular4 Highcharts TypeError using requireAngular4 Highcharts TypeError使用require
【发布时间】：2017-10-03 12:25:30
【问题描述】：

我正在使用 Angular4 和 angular2-highcharts。根据文档，我需要包含带有 require 属性的 highcharts 模块。它适用于包含 highcharts 模块，但不适用于附加模块（highcharts-more、highmaps 等）。当我包含更多的 highcharts 模块时，我会收到如下错误：

TypeError: n is not a function
TypeError: n is not a function
    at highcharts-more.js:8
    at highcharts-more.js:11

我需要实现一个热图，但它现在不起作用，因为它使用了额外的模块。知道如何解决这个问题吗？

这是我的 app.module.ts 代码

   // solution for angular not picking up required attribute
    declare const require: any;
    export function highchartsFactory() {
      let hc = require('highcharts');
      let hex = require('highcharts/modules/exporting');
      let hmod = require('highcharts/highcharts-more');
      hex(hc);
      hmod(hex);
      return hc;
    }

    imports: [
        ChartModule,
      ],
    providers: [
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    }
   ]

【问题讨论】：

您能告诉我们您为什么要这样初始化这些部件吗？模块应该在 Highcharts 实例上初始化，比如hmod(hc); hex(hc); return hc;。然后，当您传递 Highcharts 实例时，例如如图所示：github.com/gevgeny/…
我是否做 hmod(hc); 并不重要十六进制（hc）；返回hc；或者我做了什么。我仍然收到错误：错误：Highcharts 错误 #17。我使用了这个 highchartsFactory 解决方案，因为 highcharts 以这种方式工作正常（否则由于某种原因无法识别 require），问题是一旦我实现另一个 highcharts 模块（如 highcharts-more），它就无法工作。因此，如果我在不只需要（'highcharts'）的情况下这样做，那么对于普通图表来说一切正常。我正在尝试让热图工作。

标签： javascript angular highcharts heatmap angular2-highcharts

【解决方案1】：

我通过在 app.module.ts 中执行以下操作解决了这个问题

declare const require: any;
export function highchartsFactory() {
  let Highcharts = require('highcharts');
  let Heatmap = require('highcharts/modules/heatmap');
  Heatmap(Highcharts);
  return Highcharts;
}

【讨论】：

【解决方案2】：

heatmap 系列类型不在highcharts-more 文件中。所需文件为heatmap - 如本演示所示：

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/heatmap/

并在此处的文档中解释：

https://www.highcharts.com/docs/chart-and-series-types/heatmap

【讨论】：