Mapbox-gl и angular2

Question

Я пытаюсь интегрировать приложение mapbox-gl в angular2. Но после того, как приложение службы не работает.

служба

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

    } 

} 

Модуль

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

После запуска приложения это ошибка, я получаю

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

и

ZoneAwareError 

mabpox-ОЛ была установлена ​​с этими командами

npm install mapbox-gl --save 

and 

npm install @types/mapbox-gl --save 

Answer 1

Проверьте файл systemjs.config.js. Вероятно, вы не задали путь node_modules пакета.

(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, проверьте, если @types библиотека mapboxgl поддерживает версию библиотеки mapboxgl, что вы устанавливаете.

Затем, на службе, объявите карту похожей на карту: mapboxgl.Map;

и в компоненте объявить карту как

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

Наконец, перейдите к tsconfig.json, в поле «compilerOptions» и проверьте, если вы установите свойство типов с типами mapboxgl. Например:

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

}

Я надеюсь, что это помогает. С уважением.