使用 Dot Net Core 2.1 迁移到 Angular 6 的传单热图覆盖中断答案

【问题标题】：Leaflet heatmap overlay breaks moving to Angular 6 with Dot Net Core 2.1使用 Dot Net Core 2.1 迁移到 Angular 6 的传单热图覆盖中断
【发布时间】：2018-06-19 23:46:23
【问题描述】：

我目前正在将我的 Angular 代码从旧的 Dot Net Core Angular 模板移动到新的 angular-cli 版本。我用新的 Angular 6 版本完全替换了 Angular 模板中的 Angular 5 cli，并让基本站点全部启动并成功运行。

接下来我开始移动我的一些组件。其中一个组件是传单映射组件，它显示了带有区域叠加层的我国地图。那工作得很好。但是，我有一个热图组件 (heatmap.js)，它在旧的角度模板中工作，我不太清楚如何在新的角度模板中工作。

在旧模板中，我将 heatmap.js 和 leaflet-heatmap 添加到我的 package.json 文件中：

"leaflet": "1.3.1",
"heatmap.js": "2.0.5",
"leaflet-heatmap": "1.0.0",

然后，由于热图不符合从 npm 包导入 Angular 的正确结构，我将以下内容添加到 webpack.config.vendor.js 文件中：

"heatmap.js/build/heatmap.min.js",
"leaflet-heatmap/leaflet-heatmap.js",

在我的代码中，我可以导入热图和传单热图，并声明 HeatmapOverlay 变量。

import "heatmap.js";
import "leaflet-heatmap";
declare var HeatmapOverlay: any;

热图可以工作：

现在我在 angular-cli 上，它有点不同，因为 webpack 本身没有暴露，看起来它不应该暴露。如果我正确设置了导入，我应该能够运行完全相同的代码。所以我在 package.json 文件中添加了相同的包：

"leaflet": "1.3.1",
"heatmap.js": "2.0.5",
"leaflet-heatmap": "1.0.0",

这一次，我想处理结构不正确的脚本的导入，我可以将它添加到 angular.json 文件中，如下所示：

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/heatmap.js/build/heatmap.min.js",
              "node_modules/leaflet-heatmap/leaflet-heatmap.js"
            ],

不幸的是，这失败了，出现以下错误：

ERROR ReferenceError: HeatmapOverlay 未定义

我认为这确实是一个关于如何将旧的 webpack.config.vendor.js 结构转换为新的 angular.json 格式的问题。任何想法如何解决这个问题？

【问题讨论】：

我正在尝试实现同样的事情。你能帮我写代码吗？

标签： angular webpack leaflet angular-cli heatmap

【解决方案1】：

没关系，我想通了。我只需要将先决条件传单脚本添加到 angular.json 中的脚本列表中：

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/leaflet/dist/leaflet.js",
              "node_modules/heatmap.js/build/heatmap.min.js",
              "node_modules/leaflet-heatmap/leaflet-heatmap.js"
            ]

【讨论】：