Angular 17 + Leaflet热力图本地正常，XAMPP部署后报错求助

问题根源 #

本地运行正常但生产部署后报错TypeError: L7.heatLayer is not a function，核心原因有两个：

1. 未在angular.json中配置leaflet.heat的脚本文件，生产构建时插件未被打包加载，导致Leaflet全局对象上没有heatLayer方法
2. 生产环境的代码压缩混淆会改写全局变量名（比如L变为L7），但本质还是插件未正确挂载到Leaflet实例

解决方案 #

1. 补充angular.json的脚本配置 #

打开项目根目录的angular.json，在scripts数组中添加leaflet.heat的脚本路径：

"scripts": [
  "node_modules/leaflet/dist/leaflet.js",
  "node_modules/leaflet.heat/dist/leaflet-heat.js" // 新增该行，注意插件脚本路径
]

2. 优化TypeScript类型支持（可选但推荐） #

安装leaflet.heat的类型定义包，避免频繁使用//@ts-ignore：

npm install @types/leaflet.heat --save-dev

安装后TypeScript会自动识别L.heatLayer方法，无需忽略类型检查。

3. 重新构建并部署 #

执行生产构建命令：

ng build --configuration=production

将构建后的dist目录重新部署到XAMPP，再次通过IP访问测试。

备选方案：ES模块导入方式 #

如果全局脚本配置仍有问题，可改用ES模块导入并自动挂载插件：
在组件文件顶部添加：

import * as L from 'leaflet';
import 'leaflet.heat'; // 插件会自动挂载到L对象上

同时移除angular.json中leaflet.heat的脚本配置，避免重复加载。

内容的提问来源于stack exchange，提问作者goktugkurkcu