leaflet.freedraw in Ionic 2

私はIonic 2プロジェクトでLeaflet.freedrawプラグインを使いたいと思っていました。リーフレットの自己は問題なく働いています。私は、エラーメッセージを取得私のMapPageコンポーネントにlet freeDraw = new FreeDraw();を追加するときしかし：FreeDrawのREADMEでleaflet.freedraw in Ionic 2

Uncaught Error: Cannot find module "L" at webpackMissingModule

を、それは私が私のwebpack.configに次の行を追加する必要が言う：

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

私はこれをしませんでしたnode_modules/@ionic/app-scripts/config/webpack.config.jsにあるが、これは役に立たない。

サードパーティのライブラリのionic 2 documentationのように、declarations.d.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 {}

私はこのようなリーフレットを追加しました：：

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

は、私は私のapp.module.tsに、このようにそれを追加しようとしました

import * as L from 'leaflet';

ので、私はこの試みたとき：

を

import { L } from 'leaflet';

リーフレットにsuが含まれていないというエラーが表示されました。 chエクスポートコンポーネント。

これは私の地図のコンポーネントです：

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); 



    } 

}

私は何を逃したのですか？

出典

2016-12-15 cedricblaser01