title: Leaflet heatmap overlay breaks moving to Angular 6 with Dot Net Core 2.1
body: <p>I am currently moving my angular code from the old Dot Net Core Angular template to the new angular-cli version. I completely replaced the angular 5 cli that was in the Angular template with the new Angular 6 version, and got the basic site all up and running successfully.</p>
  
  <p>Next I started moving some of my components across. One of those components is a leaflet mapping component that shows a map of my country with regional overlays. That is working beautifully. However, I have a heatmap component (heatmap.js) that was working in the old angular template that I can't quite figure out how to get working in the new angular template.</p>
  
  <p>In the old template, I added heatmap.js and leaflet-heatmap to my package.json file:</p>
  
  <pre><code>"leaflet": "1.3.1",
  "heatmap.js": "2.0.5",
  "leaflet-heatmap": "1.0.0",
  </code></pre>
  
  <p>then, because heatmap doesn't conform to the correct structure for importing into Angular from an npm package, I added the following to the webpack.config.vendor.js file:</p>
  
  <pre><code>"heatmap.js/build/heatmap.min.js",
  "leaflet-heatmap/leaflet-heatmap.js",
  </code></pre>
  
  <p>In my code, I was then able to import heatmap and leaflet-heatmap, and declare the HeatmapOverlay variable.</p>
  
  <pre><code>import "heatmap.js";
  import "leaflet-heatmap";
  declare var HeatmapOverlay: any;
  </code></pre>
  
  <p>And the heatmap would work:
  <a href="https://i.stack.imgur.com/WdE2s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WdE2s.png" alt="Heatmap overlay"></a></p>
  
  <p>Now that I am on angular-cli, it is a bit different because webpack itself is not exposed, and it looks like it shouldn't need to be. I should be able to run exactly the same code if I set up the import correctly. So I added the same packages to the package.json file:</p>
  
  <pre><code>"leaflet": "1.3.1",
  "heatmap.js": "2.0.5",
  "leaflet-heatmap": "1.0.0",
  </code></pre>
  
  <p>and this time, I thought to handle the import of the incorrectly structured scripts, I could add it to the angular.json file, as follows:</p>
  
  <pre><code>"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"
              ],
  </code></pre>
  
  <p>Unfortunately, this fails, with the following error:</p>
  
  <blockquote>
    <p>ERROR ReferenceError: HeatmapOverlay is not defined</p>
  </blockquote>
  
  <p>I think it's really a question about how to get the old webpack.config.vendor.js structure converted to the new angular.json format. Any ideas how to fix this issue? </p>