Когда включать JS-библиотеки, используя теги скриптов в TypeScript?

Question

У меня возникло немало проблем с правильной работой TypeScript с использованием операторов import.

Например, в настоящее время я работаю над созданием приложения Angular2 с использованием Листовки. Мне удалось правильно загрузить несколько библиотек, таких как Lodash и Leaflet, однако теперь я боюсь, что Leaflet плагин Leaflet.MarkerCluster работает правильно.

Путь я импортирования следующим образом:

import L from 'markercluster';

У меня есть следующие в моем определении SystemJS:

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

Это вызывает файл MarkerCluster для загрузки и прикрепляет и я могу получить к нему доступ с L.MarkerClusterGroup, например, когда я тестирую его в консоли.

Однако, когда я запускаю его в модуле TypeScript, я получаю сообщение об ошибке. Я немного поработал, и похоже, это связано с тем, как работает сгенерированный JavaScript. Сформированный JavaScript не на самом деле пытается получить доступ к L (листовка глобальный объект), но, скорее, это доступ к:

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

Осматривая markercluster_1.default, я могу видеть, что это пустой объект. Не уверен, как обойти это, но я думаю, что даже стоит использовать импортные заявления в этой ситуации? Было бы разумнее просто включить в верхнюю часть страницы и использовать ///<reference path='....'> в файле TypeScript, где я пытаюсь получить доступ к модулю?

Answer 1

Не знаю, как обойти эту проблему, но я думаю, если это даже стоит использовать операторы импорта в этой ситуации

Моих мнений

• Держитесь подальше от systemjs. Просто используйте webpack.
• Использование require

Пример:

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

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

партия

Answer 2

Я использую Visual Studio код для кодирования углового 5 приложения и я решить ту же проблему следующим образом:

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