プロパティ 'Draw'が 'typeof Control'の型に存在しません

Question

リーフレットや他のリーフレットプラグインでマップコンポーネントを実装しようとしています。他のプラグインが何らかの理由でTypeScriptから動作しないという問題があります。例えば

私はリーフレットドロープラグインを使用してコードをコンパイルすることができないんだとエラーを取得：

Property 'Draw' does not exist on type 'typeof Control'

mapbox.component.ts

import { DataService } from "../data-service.service"; 
import { Component, OnInit } from '@angular/core'; 


import * as $ from 'jquery'; 
/// <reference types="leaflet" /> 
/// <reference types="leaflet-draw" /> 

declare var require: any 


@Component({ 
    selector: 'app-mapbox', 
    templateUrl: './mapbox.component.html', 
    styleUrls: ['./mapbox.component.css'] 
}) 

export class MapboxComponent implements OnInit { 

    constructor(private dataService: DataService) { } 
    // helper flags 
    map: L.Map = null; 
    aggreagte: boolean = false; 

    ngOnInit() { 
     // Prepare map 
     this.map = L.map('resultmap').setView([51.505, -0.09], 1); 
     // 
     L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</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, 
      id: 'mapbox.streets', 
      accessToken: '...' 
     }).addTo(this.map); 

     var drawnItems = L.featureGroup(); 
     this.map.addLayer(drawnItems); 
     var control = new L.Control.Draw(); 
     ... 

角度-cli.json

"apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.css", 
     "../node_modules/leaflet/dist/leaflet.css", 
     "../node_modules/leaflet-markercluster/MarkerCluster.css", 
     "../node_modules/leaflet-draw/dist/leaflet.draw.css" 
     ], 
     "scripts": [ 
     "../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/leaflet/dist/leaflet.js", 
     "../node_modules/leaflet-markercluster/leaflet.markercluster.js", 
     "../node_modules/leaflet-draw/dist/leaflet.draw.js", 
     "../node_modules/chart.js/dist/Chart.bundle.min.js" 
     ], 
     "environments": { 
     "source": "environments/environment.ts", 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ] 
... 

tsconfig.json

"compilerOptions": { 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "outDir": "../dist/out-tsc-e2e", 
    "sourceMap": true, 
    "target": "es5", 
    "files":[ 
     "../node_modules/@types/leaflet-draw/index.d.ts" 
    ], 
    "typeRoots": [ 
     "../node_modules/@types" 
    ], 
    "types":[ 
     "jquery", 
     "leaflet", 
     "leaflet-draw", 
     "leaflet-markercluster" 
    ] 
    } 

Answer 1

私は

import 'leaflet-draw'; 

ない、それはTSconfigのでインポートするが、それは動作しますイェーイされなかった理由を確認しリーフレット-描くインポートすることによって、問題を解決しました！

Answer 2

ありがとう@洞察のための@aclokay。私は標準的なリーフレットのインポートを変更することを忘れないことを加えて、この回答を完成させたいと思います。例：

// import * as L from 'leaflet'; 
// --> Doesn't work : Property 'Draw' does not exist on type 'typeof Control'. 
declare const L: any; // --> Works 
import 'leaflet-draw'; 

export function drawPlugin(map: any) { 
    const drawnItems = L.featureGroup().addTo(map); 

    const drawControl = new L.Control.Draw({ 
    edit: { 
     featureGroup: drawnItems, 
    }, 
    draw: { 
     polygon: false, 
     polyline: false, 
     marker: false, 
     circlemarker: false 
    } 
    }); 
    map.addControl(drawControl); 

    map.on(L.Draw.Event.CREATED, function (event) { 
    const layer = event.layer; 

    drawnItems.addLayer(layer); 
    }); 
}