typescript - Importă leaflet Draw într-un proiect Angular 2

Sunt nou în Angular2. Creat cu CLI. Deși am reușit să import Leaflet în acest proiect Angular2 fără nicio directivă Angular2, aș dori să fac același lucru cu extensia Leaflet Draw. Nu am reușit să fac Draw să funcționeze. Practic, vreau să import un modul care extinde altul în același spațiu de nume. Leaflet, în acest caz. Nimeni nu știe cum să facă asta?

Iată fișierul meu package.json

{
"name": "amscm-web",
  "version": "2.0.31c",
  "license": "",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.2.3",
    "@angular/compiler": "^4.2.3",
    "@angular/core": "^4.2.3",
    "@angular/forms": "^4.2.3",
    "@angular/http": "^4.2.3",
    "@angular/platform-browser": "^4.2.3",
    "@angular/platform-browser-dynamic": "^4.2.3",
    "@angular/router": "^4.2.3",
    "@asymmetrik/angular2-leaflet": "^2.1.5",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
    "@qontu/ngx-inline-editor": "^0.2.0-alpha.4",
    "@types/leaflet-draw": "^0.4.5",
    "angular-oauth2-oidc": "^1.0.20",
    "angular-sortablejs": "^2.0.6",
    "angular2-uuid": "^1.1.1",
    "core-js": "^2.4.1",
    "karma-chrome-launcher": "^2.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "leaflet": "^1.0.3",
    "leaflet-draw": "^0.4.9",
    "ng-select": "^1.0.0-beta.5",
    "ng2-dnd": "^4.2.0",
    "rxjs": "^5.4.1",
    "sortablejs": "^1.6.0",
    "ts-helpers": "^1.1.1",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.4.5",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "^1.1.2",
    "@angular/compiler-cli": "^4.2.3",
    "@types/gapi": "0.0.33",
    "@types/gapi.auth2": "0.0.39",
    "@types/jasmine": "2.5.53",
    "@types/leaflet": "^1.0.63",
    "@types/node": "^8.0.3",
    "codelyzer": "~3.1.1",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.1",
    "karma": "1.7.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~5.1.2",
    "ts-node": "3.1.0",
    "tslint": "^5.4.3",
    "typescript": "latest",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  }
}

de asemenea, aici este fișierul meu map.model.ts

import * as L from 'leaflet';
import 'leaflet.draw'

export class LeafletMapModel {

  constructor(
    public baseLayers: {
      id: string,
      name: string,
      enabled: boolean,
      layer: L.Layer
    }[],
    public baseLayer: string,
    public overlayLayers: {
      id: string,
      name: string,
      enabled: boolean,
      layer: L.Layer
    }[] = []
  ) { }

}

Răspuns #1

Acest lucru funcționează pentru mine:

import { Component } from '@angular/core';
import { Leaflet } from 'leaflet';
import { Draw } from 'leaflet-draw';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  _layer = Leaflet.layer;
  _draw = Draw.drawLocal;
}

Răspunsul #2

Următoarea abordare a funcționat destul de bine pentru mine:

npm install leaflet@latest --save

și în componenta Angular:

       import * as L from 'leaflet';
...
        @ViewChild('map') mapElement;
          ngOnInit() {
    const myMap = this.mapElement.nativeElement;
    const map = L.map(myMap).setView([51.505, -0.09], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([51.5, -0.09]).addTo(map)
        .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
        .openPopup();

}