Angular14升级后Leaflet扩展Draw/canvasMarker导入报错求助

问题背景 #

从Angular 13（TypeScript 4.6.4）升级至Angular 14（TypeScript 4.7.4）后，原本正常运行的Leaflet扩展库（leaflet-draw、leaflet-canvas-markers）出现导入错误，无法访问L.Draw、L.canvasMarker等扩展属性。

依赖配置 #

当前使用的依赖包版本：

"@types/leaflet": "^1.8.0",
"@types/leaflet-draw": "^1.0.5",
"leaflet-canvas-markers": "^1.0.7",
"leaflet": "^1.9.1",
"leaflet-draw": "^1.0.4",

导入代码 #

服务文件顶部的导入语句：

import * as L from 'leaflet';
import 'leaflet-canvas-markers';
import 'leaflet-draw';

报错信息 #

• leaflet-draw相关错误：

Error: export 'Draw' (imported as 'L') was not found in 'leaflet' (possible exports: ...)

• leaflet-canvas-markers相关错误：

Error: export 'canvasMarker' (imported as 'L') was not found in 'leaflet' (possible exports: ...)

触发报错的代码 #

const leafletDrawPolyline = new L.Draw.Polyline(map, options);

已尝试无效方案 #

使用类型断言const leafletDrawPolyline = new (L.Draw as any).Polyline(map, options);未解决问题。

解决建议 #

• 同步类型包与主包版本：TypeScript 4.7对模块导出的检查更严格，当前@types包版本可能与leaflet主包不兼容。升级@types/leaflet至匹配leaflet 1.9.1的版本（如@types/leaflet@1.9.3），同时升级@types/leaflet-draw至适配版本（如@types/leaflet-draw@1.0.11），执行npm install更新依赖。

• 自定义类型声明扩展：在项目中创建类型声明文件（如src/typings/leaflet-extensions.d.ts），手动扩展Leaflet的类型定义：

import * as L from 'leaflet';

declare module 'leaflet' {
  namespace Draw {
    class Polyline {
      constructor(map: L.Map, options: L.Control.DrawOptions);
      // 按需添加Draw其他类的声明，如Rectangle、Marker等
    }
  }

  function canvasMarker(latlng: L.LatLngExpression, options?: L.MarkerOptions): L.Marker;
}

确保该文件被TypeScript识别，在tsconfig.json的include数组中添加路径：

"include": [
  "src/**/*",
  "src/typings/**/*"
]

• 调整导入与初始化时机：将扩展库的导入放在leaflet之后，且确保在组件/服务初始化时，扩展库已完成挂载。比如在Angular服务的ngOnInit或构造函数中延迟初始化Leaflet组件：

import * as L from 'leaflet';
import 'leaflet-draw';
import 'leaflet-canvas-markers';

@Injectable()
export class MapService implements OnInit {
  ngOnInit(): void {
    // 在此处初始化Draw组件，确保扩展已加载
    const leafletDrawPolyline = new L.Draw.Polyline(this.map, options);
  }
}

• 检查Angular构建配置：在angular.json中确认leaflet相关脚本已正确引入到scripts数组，确保扩展库全局挂载：

"architect": {
  "build": {
    "options": {
      "scripts": [
        "./node_modules/leaflet/dist/leaflet.js",
        "./node_modules/leaflet-draw/dist/leaflet.draw.js",
        "./node_modules/leaflet-canvas-markers/dist/leaflet.canvas-markers.js"
      ],
      "styles": [
        "./node_modules/leaflet/dist/leaflet.css",
        "./node_modules/leaflet-draw/dist/leaflet.draw.css"
      ]
    }
  }
}

• 改用require导入扩展库：尝试用require替代import加载扩展库，绕过TypeScript的模块导出检查：

import * as L from 'leaflet';
require('leaflet-draw');
require('leaflet-canvas-markers');

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