Dépliant d'importation Dessiner dans un projet angulaire 2

Question

Je suis nouveau sur Angular2. Construit avec Cli. Bien que j'étais capable d'importer Leaflet dans ce projet Angular2 sans aucune directive Angular2. Je voudrais faire la même chose avec l'extension Leaflet Draw. Je n'ai pas réussi à faire fonctionner Draw. Fondamentalement, je veux importer un module qui en étend un autre sur le même espace de noms. Brochure dans ce cas. Est-ce que personne ne sait comment faire ça?

Voici mon 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" 
    } 
} 

aussi voici mon 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 
    }[] = [] 
) { } 

} 

Answer 1

Cela fonctionne pour moi:

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

Answer 2

L'approche suivante a fonctionné pour moi plutôt bien:

npm install leaflet@latest --save 

et dans le composant angulaire:

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

}