La propriété 'Draw' n'existe pas sur le type 'typeof Control'

Question

Je tente d'implémenter un composant de carte avec un dépliant et d'autres plugins de dépliant. Le problème est que d'autres plugins ne fonctionnent pas avec TypeScript pour une raison quelconque.

Par exemple, je suis incapable de compiler le code avec le plugin dépliant-draw et obtenir l'erreur:

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 angulaire

"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

Je résolu la question en important dépliant-tirage

import 'leaflet-draw'; 

Je ne sais pas pourquoi il n'a pas été importer par TSconfig, mais yay ça marche!

Answer 2

Merci @aclokay pour la perspicacité. Je compléterais cette réponse en ajoutant que vous ne devez pas oublier de changer aussi l'importation de dépliant standard. Par exemple:

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