Mapbox-gl und angular2

Question

ich versuche mapbox-gl in angular2 zu integrieren. Aber nach dem Erstellen der Service-App funktioniert nicht.

Dienst

import {Injectable} from '@angular/core'; 
import * as mapboxgl from 'mapbox-gl'; 
import { Map } from 'mapbox-gl'; 

@Injectable() 
export class MapService { 
    map: Map; 
    baseMaps: any; 

    constructor() { 

     (mapboxgl as any).accessToken = 'my_acces_token(in original code included';) 

    } 

} 

Modul

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { AppComponent } from './app.component'; 
import {MapService} from './services/mapService/mapBox.service' 

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ], 
    providers: [MapService] 
}) 
export class AppModule { } 

Nach dem Start der App ist dies Fehler, den ich bekommen

Failed to load resource: the server responded with a status of 404 (Not Found) 

und

ZoneAwareError 

Answer 1

Überprüfen Sie Ihre systemjs.config.js Datei

mabpox-gl wurde mit diesen Befehlen

installiert. Wahrscheinlich haben Sie den Pfad node_modules nicht festgelegt.

(function (global) { 
    System.config({ 
    map: { 
     'mapbox-gl': '[Your node_module folder]/mapbox-gl/dist', 
     [....] 
     }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     'mapbox-gl': { 
     main: './mapbox-gl.js', 
     defaultExtension: 'js' 
     }, 
     [....] 
    } 
    }); 
})(this); 

Answer 2

Firstable, überprüfen, ob die @types Bibliothek von mapboxgl die mapboxgl Bibliothek Version unterstützen, die Sie installieren.

Dann, im Dienst, deklarieren Sie die Karte wie map: mapboxgl.Map;

und in Ihrer Komponente erklären die Karte wie

this.map = new mapboxgl.Map({ 
      container: 'map', 
      center: GlobalVariables.defaultCoord, 
      maxZoom: GlobalVariables.defMaxZoom, 
      minZoom: GlobalVariables.defMinZoom, 
      zoom: GlobalVariables.defZoom, 
      style: GlobalVariables.mapboxDark 
     }); 

schließlich zu tsconfig.json gehen, in dem „Compiler“ Feld, und prüfen Sie, ob Sie die Typ Eigenschaft mit den mapboxgl Typen festgelegt. Zum Beispiel:

"compilerOptions": { 
"moduleResolution": "node", 
"target": "es5", 
"sourceMap": true, 
"experimentalDecorators": true, 
"emitDecoratorMetadata": true, 
"skipDefaultLibCheck": true, 
"lib": [ "es5", "es6", "dom" ], 
"types": [ "node", "geojson", "mapbox-gl" ] 

}

Ich hoffe, dass dies hilft. Grüße.