Angular 4导入Leaflet Draw NGX报错，是否操作有误或与ES版本相关？

作为Angular 4的新手碰到这种问题太正常了，咱们先别着急怀疑ES版本，先从最容易踩坑的地方一步步排查：

1. 先检查依赖包的选择与版本匹配 #

你提到安装了leaflet-ngx和leaflet-draw-ngx，但官方维护的ngx-leaflet相关包是@asymmetrik/ngx-leaflet和@asymmetrik/ngx-leaflet-draw——这很可能是你踩的第一个坑！

Angular 4属于比较旧的版本，必须安装对应版本的依赖，不能直接装最新版：

• 正确的依赖包应该是：@asymmetrik/ngx-leaflet、@asymmetrik/ngx-leaflet-draw、leaflet、leaflet-draw
• 适配Angular 4的版本范围大概是：
  • @asymmetrik/ngx-leaflet: ^4.0.0
  • @asymmetrik/ngx-leaflet-draw: ^4.0.0
  • leaflet: ^1.0.0
  • leaflet-draw: ^0.4.0

你可以通过以下命令重新安装适配版本的依赖：

npm install @asymmetrik/ngx-leaflet@4.0.0 @asymmetrik/ngx-leaflet-draw@4.0.0 leaflet@1.0.3 leaflet-draw@0.4.12 --save

2. 确认模块导入是否正确 #

在app.module.ts中，要确保导入的是正确的模块，并且调用forRoot()方法完成初始化：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入正确的leaflet模块
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // 必须调用forRoot()初始化模块
    LeafletModule.forRoot(),
    LeafletDrawModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 不要忘记引入样式文件 #

Leaflet和Leaflet Draw都需要对应的CSS才能正常渲染，在Angular 4项目中（如果用Angular CLI），你需要在.angular-cli.json的styles数组中添加：

"styles": [
  "../node_modules/leaflet/dist/leaflet.css",
  "../node_modules/leaflet-draw/dist/leaflet.draw.css",
  "styles.css"
]

如果不是CLI项目，可以直接在index.html中通过<link>标签引入这些CSS文件。

4. ES版本的影响（可能性较低） #

Angular 4默认的TypeScript目标版本是ES5，而适配Angular 4的ngx-leaflet版本已经做了兼容处理，所以只要依赖版本正确，ES版本一般不会是问题。你可以检查tsconfig.json中的target字段是否为"es5"或"es2015"，保持默认配置即可。

先按上面的步骤排查，尤其是依赖包名和版本的问题，这是新手最容易出错的地方。如果还是报错，可以把具体的错误信息贴出来，方便进一步定位！

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