Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I'm attempting to implement a map component with leaflet and other leaflet plugins. The issue is other plugins don't work from TypeScript for some reason.

For example I'm unable to compile code with leaflet-draw plugin and getting the error:

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

angular-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"
    ]
  }
like image 693
aclowkay Avatar asked Mar 06 '17 08:03

aclowkay


People also ask

How to solve'property does not exist on type {}'error?

The "Property does not exist on type ' {}'" error occurs when we try to access or set a property that is not contained in the object's type. To solve the error, type the object properties explicitly or use a type with variable key names. Copied!

Does the classic 'property does not exist on type window in typescript'?

The code worked fine, but the classic 'Property does not exist on type Window in TypeScript' error flagged up on the build command and TypeScript complained about it endlessly. The Window type is defined in the lib.dom TypeScript module (as per the following documentation on TSDoc.

Why can't I assign properties to an empty object?

We didn't explicitly type the obj variable and declared it to an empty object, so we aren't able to assign or access properties that don't exist on the object's type.


1 Answers

I solved the issue by importing leaflet-draw

import 'leaflet-draw';

Not sure why it wasn't import by tsconfig, but yay it works!

like image 193
aclowkay Avatar answered Oct 11 '22 03:10

aclowkay