Q:

leaflet.freedraw in Ionic 2

I wanted to use Leaflet.freedraw plugin in my Ionic 2 Project. Leaflet self is working without problems. But when add let freeDraw = new FreeDraw(); to my MapPage Component i get the error message: 

Uncaught Error: Cannot find module "L"  at webpackMissingModule 

In the README of FreeDraw it says i have to add following line to my webpack.config:
resolve: {
 alias: {
     L: 'leaflet'
 }
};

I did this in node_modules/@ionic/app-scripts/config/webpack.config.js but this doesn't helped. 
I added leaflet and leaflet.freedraw to my declarations.d.ts file like it says in the ionic 2 documentation for third party libraries. 
declare module '*';
declare module 'leaflet';
declare  module 'leaflet.freedraw';

I tried to add it like this to my 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 {}

I added leaflet like this: 
import * as L from 'leaflet'; 

because when i tried this: 
import { L } from 'leaflet';

i got an error that leaflet doesn't have such an export component. 
This is my Map Component:
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);

  }

}

What did i miss? 

A:

You should use the tool called DefinitelyTyped/tsd  as follows:
tsd install --save leaflet

This would add a typescript definition file into your project under the folder typings/leaflet so that you could be able to use leaflet library. You can use the library by just adding the following line:
import 'leaflet';

As to the leaflet.freedraw leaflet plugin, I think js plugins in typescript is an headache unless they have a TS definition file. I have been trying to find a solution for a while.

