Wann JS-Bibliotheken mit Skript-Tags in TypeScript enthalten sind?

Question

Ich habe ziemlich viele Probleme bekommen, TypeScript richtig zu verwenden, indem ich import Anweisungen verwende.

Zum Beispiel arbeite ich gerade an der Erstellung einer Angular2-Anwendung mit Leaflet. Ich habe es geschafft, ein paar Bibliotheken korrekt zu laden, wie Lodash und Leaflet, aber jetzt kämpfe ich mit einem Leaflet-Plugin, Leaflet.MarkerCluster funktioniert richtig.

So wie ich bin den Import wie folgt:

import L from 'markercluster';

Ich habe folgendes in meiner SystemJS Definition:

markercluster: 'node_modules/leaflet.markercluster/dist/leaflet.markercluster'

Dies bewirkt, dass die MarkerCluster Datei und Attaches laden und ich kann es zum Beispiel von L.MarkerClusterGroup zugreifen, wenn ich es in der Konsole testen.

Wenn ich es jedoch in einem TypeScript-Modul ausführen, erhalte ich einen Fehler. Ich habe ein bisschen gegraben und dies scheint auf die Art und Weise zurückzuführen zu sein, wie das generierte JavaScript läuft. Die erzeugte JavaScript ist tatsächlich versucht, L (das Faltblatt globale Objekt) zugreifen zu können, sondern es Zugriff auf:

var m = new markercluster_1.default.MarkerClusterGroup();

Inspizieren markercluster_1.default, kann ich sehen, dass es ein leeres Objekt. Ich bin mir nicht sicher, wie ich das umgehen soll, aber ich denke, wenn es überhaupt Sinn macht, in dieser Situation Importanweisungen zu verwenden? Wäre es sinnvoller, einfach oben in die Seite zu schreiben und ///<reference path='....'> in der TypeScript-Datei zu verwenden, in der ich versuche, auf das Modul zuzugreifen?

Answer 1

nicht sicher, wie dies zu umgehen, aber ich denke, wenn es auch wert ist mit Import-Anweisungen in dieser Situation

Meine Meinungen

• Steer von systemjs entfernt. Benutze einfach das Webpack.
• Verwenden require

Probe:

import * as leaflet from "leaflet"; 
// Augment leaflet 
require('./leaflet.markercluster/dist/leaflet.markercluster'); 

// use new feature 
(leaflet as any).MarkerClusterGroup; 

Partei

Answer 2

ich Visual Studio-Code verwenden Winkel 5 Anwendung codieren und löse ich das gleiche Problem wie folgt:

import L from 'leaflet'; 
import 'leaflet.markercluster'; 

... 

ngOnInit() { 
    this.map = L.map(this.mapId, options); 
    this.activePOICommonLayer = L.markerClusterGroup().addTo(this.map); 

    //create marker here; 

    this.activePOICommonLayer.addLayer(marker); 
}