Angular 7中使用npm安装Leaflet报错：L is not defined

AI 小北

2026-5-13

解决Angular 7中Leaflet的「ERROR ReferenceError: L is not defined」问题

我之前在Angular项目里集成Leaflet时也踩过这个坑！你用npm安装了Leaflet但还是报L is not defined，核心问题是Angular没有正确加载Leaflet的全局资源，下面给你一步步解决的方法：

第一步：补装类型声明包（可选但更规范）
虽然你已经通过npm install leaflet装了核心包，但为了让Angular识别Leaflet的类型，建议安装对应的类型声明：
```
npm install @types/leaflet --save-dev
```
第二步：在angular.json中全局引入Leaflet资源
Angular默认不会自动加载node_modules里的第三方脚本和样式，需要手动配置。打开项目根目录的angular.json，找到build -> options下的styles和scripts数组，分别添加Leaflet的CSS和JS路径：
```
"styles": [
  "node_modules/leaflet/dist/leaflet.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/leaflet/dist/leaflet.js"
]
```
配置完成后重启Angular开发服务器，让配置生效。

第三步：优化组件代码（替换全局声明）
你之前用declare let L是临时的全局变量声明，现在可以直接导入Leaflet模块，代码更规范：

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet'; // 直接导入Leaflet

@Component({
  selector: 'app-mapvisual',
  templateUrl: './mapvisual.component.html',
  styleUrls: ['./mapvisual.component.css']
})
export class MapvisualComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    const map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  }
}