CODEWITHSUNDEEP
angularwebpackmapboxangular-climapbox-gl-js
jenson-button-event
jenson-button-event

Reputation: 18941

angular 2 webpack issues with 3rd party library

I am trying to get a 3rd party library up and running in my angular-cli generated project.

I have thus far installed:

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

In 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 yields many errors complaining on similar lines:

ERROR in ./~/mapbox-gl/js/util/util.js Module parse failed: C:_dev\angular-mapbox\node_modules\mapbox-gl\js\util\util. js Unexpected token (15:35) You may need an appropriate loader to handle this file type. | * @private | */ | exports.easeCubicInOut = function(t: number): number { | if (t <= 0) return 0; | if (t

= 1) return 1; @ ./~/mapbox-gl/js/mapbox-gl.js 26:16-38 @ ./src/app/app.component.ts @ ./src/app/app.module.ts @ ./src/main.ts @ multi main

I was following this post (@brandonreid's answer), which has some webpack interim step which I think I need, but not sure how to knit that into given i've used the angular-cli.

On a similar vein I followed this wrapping project and get exactly the same issue.

Upvotes: 2

Views: 637

Answers (2)

Kemal Yalcinkaya
Kemal Yalcinkaya

Reputation: 1958

I think the problem is related to webpack. Try replacing the

import * as mapboxgl from 'mapbox-gl';

with 

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

Upvotes: 0

aholtry
aholtry

Reputation: 2753

Just to answer the question from the comments above... Since the third party library is not a component, you include it in the starting file, ie. index.html, as an old fashioned util.js file. Then remove the import from the app.component.ts and use it as is. Hope this helps anyone else with the same issue.

Upvotes: 1

Related Questions