угловой 2 проблемы с веб-пакетом с сторонней библиотекой

Question

Я пытаюсь запустить библиотеку сторонних разработчиков в моем angular-cli сгенерированном проекте.

Я до сих пор установлены:

npm install mapbox-gl --save 
npm install @types/mapbox-gl --save 
npm install @types/geojson --save 

В app.component.ts:

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    constructor() { 
    (mapboxgl as any).accessToken = '****'; 
    } 
    ngOnInit() { 

     let map = new Map({ 
      container: 'map', 
      style: 'mapbox://styles/mapbox/light-v9', 
      zoom: 5, 
      center: [-78.880453, 42.897852] 
     }); 

    } 

} 

ng build дает много ошибок жалуясь на подобных линиях:

ОШИБКА в ./ ~/mapbox-gl/js/util/util.js Ошибка синтаксического анализа модуля: C: _dev \ angular-mapbox \ node_modules \ mapbox-gl \ js \ util \ uti л. js Неожиданный токен (15:35) Возможно, вам понадобится соответствующий загрузчик для обработки этого типа файла . | * @private | */| export.easeCubicInOut = функция (t: число): номер {| if (t < = 0) return 0; | если (t

= 1) возвращение 1; @ ./~/mapbox-gl/js/mapbox-gl.js 26: 16-38 @ ./src/app/app.component.ts @ ./src/app/app.module.ts @ ./src/ main.ts @ мульти главного

Я был ниже this post (@ ответ brandonreid в), которая имеет некоторые WebPack промежуточный шаг, который я думаю, что мне нужно, но не уверен, как вязать, что в учитывая я использовал угловое-cli.

В аналогичном ключе я следовал this wrapping project и получал точно такую ​​же проблему.

Answer 1

Просто, чтобы ответить на вопрос из комментариев выше ... Поскольку сторонняя библиотека не является компонентом, вы включаете ее в стартовый файл, т.е. index.html, как старомодный файл util.js. Затем удалите импорт из app.component.ts и используйте его как есть. Надеюсь, это поможет кому-то еще с той же проблемой.

Answer 2

Я думаю, проблема связана с webpack. Попробуйте заменить

import * as mapboxgl from 'mapbox-gl'; 

с

import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';