Ich habe es geschafft, Leaflet mit Angular 2 und Webpack zum Laufen zu bringen.

Anhänger für 2 Packungsbeilagen

Ich kann die in "browser.d.ts" konfigurierten Eingaben sehen:

/// <reference path="browser\ambient\leaflet\leaflet.d.ts" />

webpack.config.js definiert einen Einstiegspunkt:

...
entry: {
    'polyfills': './src/polyfills.ts',
    'libs': './src/libs.ts',
    'main': './src/main.ts'
},
...

Die "libs.ts" enthält den Import des Leaflet-Moduls:

import 'leaflet';

Ich benutze Atom als Code-Editor. Es werden nun alle Leaflet-Klassen und -Methoden erkannt. In Angular 2 kann ich jetzt so etwas machen:

import {Map, TileLayer} from 'leaflet';
...
this.baseMaps = {
    StreetMap: new TileLayer('mapbox.streets')
};

Hier fangen meine Probleme an. Ich versuche mapbox.js zu benutzen. Ich habe die Bibliothek mapbox.js installiert und Folgendes eingegeben:

npm install mapbox.js --save
typings install mapbox --save

Hier stecke ich fest. Für das Leben von mir kann ich nicht herausfinden, wie man das macht, was Leaflet geschafft hat.

import 'mapbox';

Funktioniert nicht.

ERROR in ./src/libs.ts
Module not found: Error: Cannot resolve module 'mapbox' in C:\Develop\angular2-webpack-starter\src
 @ ./src/libs.ts 3:0-17

Ich kann sehen, "browser.d.ts" hat Folgendes:

/// <reference path="browser\ambient\leaflet\leaflet.d.ts" />
/// <reference path="browser\ambient\mapbox\mapbox.d.ts" />

Ich dachte, vielleicht funktioniert Mapbox nur, weil es die Leaflet-Bibliothek erweitert?

Es scheint, dass ich im Grunde so etwas tun kann, was der Standard-Javascript-Weg ist:

this.baseMaps = {
    StreetMap: L.mapbox.tileLayer('mapbox.streets')
};

Aber nicht das:

this.baseMaps = {
    StreetMap: new TileLayer('mapbox.streets')
};

Das funktioniert natürlich auch nicht:

import {Map, TileLayer} from 'mapbox';

Was mache ich falsch