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は、同様の行に文句多くのエラーが得られます。

ERRORで./ 〜/ mapbox-gl/js/util/util.jsモジュールの解析に失敗しました： C：_dev \ angle-mapbox \ node_modules \ mapbox-gl \ js \ util \ uti l。 js 予期しないトークン（15:35） このファイルタイプを処理するには、適切なローダーが必要な場合があります。 | * @private | */| exports.easeCubicInOut = 関数（t：number）：数値{| if（t < = 0）は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/私は、私は必要だと思ういくつかのWebPACKの中間工程を有する（@ brandonreidの答え）、this postを以下のが、私が使用した与えられにそのニットする方法がわからないたマルチメイン

@ main.ts 角張ったcli。

私はthis wrapping projectに似ており、まったく同じ問題を抱えています。

Answer 1

上記のコメントから質問に答えるだけです...第三者のライブラリはコンポーネントではないので、あなたはそれを開始ファイルに含めます。古い形式のutil.jsファイルとしてのindex.htmlその後、app.component.tsからインポートを削除し、そのまま使用します。これは誰もが同じ問題を抱えていることを願っています。

Answer 2

私は問題がwebpackに関連していると思います。

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