angular-highcharts 与遗留应用程序的 highcharts 库冲突答案

【问题标题】：angular-highcharts conflicts with legacy application's highcharts libangular-highcharts 与遗留应用程序的 highcharts 库冲突
【发布时间】：2018-07-25 09:31:13
【问题描述】：

Angular 2+ 用于使用 Highcharts 的 Spring MVC 应用程序的新部分。后来，highcharts 图表（angular-highcharts）被添加到用 angular 2+ 技术编写的新组件中。双方使用相同的 Highcharts 6 版本。
在初始化角度图表组件时，Highcharts 已经加载到网页中，并抛出以下Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16。

角度组件不会重新加载 Highcharts，并且会执行 H.error(code, true)。解决此冲突的最佳方法是什么？
是否应该为旧版 Web 应用程序创建额外的 Highcharts_X 全局变量？我不喜欢这种方法，因为 Higcharts 有效地使用了这种方法，然后应该在许多地方的源代码中对其进行更改。(?)

是否可以告诉 angular-higcharts 该库已加载并使用该库？
或者让它重新加载而不破坏 JS 的错误？

【问题讨论】：

看起来像是捆绑应用程序的问题。我没有看到你的整个代码，很难推断出如何解决这个问题，所以我只能猜测。
我同意你的看法。目前我在Highcharts_X hack，希望将来能找到更好的解决方案。
你能告诉我你是如何解决这个冲突的吗？我也面临同样的问题。
目前我对解决方案不满意。我在 MVC 中使用被黑的 Highcharts src，其中 Highcharts 全局变量被重命名。所以，angular插件可以初始化自己的Highcharts。不幸的是，我还不能尝试github.com/highcharts/highcharts-angular/issues/… 解决方案。

标签： javascript angular highcharts

【解决方案1】：

您可以使用全局定义的 Highcharts 而不是两次加载 Highcharts。例如：

//import * as Highcharts from 'highcharts/highstock';
declare var Highcharts: any;

您必须删除加载模块字符串并声明任何用于构建的变量都没有问题。

【讨论】：

在该项目中，Highcharts 通过 angular2-highcharts 依赖项使用。因此，需要以某种方式告诉 angular2-highcharts 使用现有的全局 Highcharts。
是的，对于 angular2-highcharts，您需要声明 var，就像在我的评论中一样。它适用于我的 angular 6 项目和全局加载的 highcharts。