离子2中的leaflet.freedraw

Question

我想在我的Ionic 2项目中使用Leaflet.freedraw插件。传单自我工作没有问题。但是，当将let freeDraw = new FreeDraw();添加到我的MapPage组件时，我会得到错误消息：

未明错误:无法在webpackMissingModule中找到模块"L“

在README of FreeDraw中，它说我必须在我的webpack.config中添加以下一行：

resolve: {
 alias: {
     L: 'leaflet'
 }
};

我在node_modules/@ionic/app-scripts/config/webpack.config.js上做了这个，但这没有帮助。

我在我的declarations.d.ts文件中添加了传单和declarations.d.ts，就像第三方库的离子2文件中说的那样。

declare module '*';
declare module 'leaflet';
declare  module 'leaflet.freedraw';

我试图像这样把它添加到我的app.module.ts中：

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { TabsPage } from '../pages/tabs/tabs';
import { Storage } from '@ionic/storage';
import { DbService } from '../providers/db-service';
import { MapPage } from '../pages/map/map';
import { JourneysPage } from '../pages/journeys/journeys';
import * as L from 'leaflet';
import { FreeDraw } from 'leaflet.freedraw';

@NgModule({
  declarations: [
    MyApp,
    TabsPage,
    MapPage,
    JourneysPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TabsPage,
    MapPage,
    JourneysPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, Storage, DbService, L, FreeDraw]
})
export class AppModule {}

我添加了像这样的传单：

import * as L from 'leaflet'; 

因为当我尝试这个：

import { L } from 'leaflet';

我发现一个错误，那就是传单上没有这样的出口组件。

这是我的Map组件：

import { Component, OnInit} from '@angular/core';
import { NavController } from 'ionic-angular';
//import * as fd from 'leaflet.freedraw';
import * as L from 'leaflet';
import { FreeDraw } from 'leaflet.freedraw';

@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})
export class MapPage implements OnInit{

  constructor(public navCtrl: NavController, ) {}

  ionViewDidLoad() {
    console.log('Hello MapPage Page');
  }

  ngOnInit() {

    let map = L.map('map').setView([51.505, -0.09], 13);
    let freeDraw = new FreeDraw();


    L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OSM</a> contributors, ' +
      '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery© <a href="http://mapbox.com">Mapbox</a>',
      maxZoom: 18,
      accessToken: "place holder for actual token"
    }).addTo(map);



  }

}

我错过了什么？

Answer 1

您应该使用名为定义类型/tsd的工具，如下所示：

tsd install --save leaflet

这将向文件夹typings/leaflet下的项目中添加一个类型记录定义文件，以便您能够使用传单库。只需添加以下行即可使用该库：

import 'leaflet';

至于leaflet.freedraw传单插件，我认为类型记录中的js插件是一个令人头疼的问题，除非它们有一个TS定义文件。一段时间以来，我一直试图找到一个解决办法。

Answer 2

不要修改node_modules中的任何代码，它们是第三方库。该指令意味着在您自己的本地Webpack配置中设置该配置。您使用配置文件运行webpack，其语法如下：

webpack --config some.config.file.js