ランタイムエラー：モジュール "leaflet.awesome-marker"が見つからないIonic 3

Question

リーフレットを使用してIphone 3アプリケーションにFont Awesomeマーカーを追加すると、リーフレットのビルトインマーカーが正常に表示されますが、 .awesome-markerモジュールionic serveは、モジュールleaflet.awesome-markersが見つからないというランタイムエラーを報告します。

私が従った1つの提案は、node_modulesディレクトリを削除し、npmにすべてを再インストールさせることです。これは結果を変えなかった。

ionic infoの

出力：

cli packages: (/home/jett/git/mobiLoc/node_modules) 

@ionic/cli-plugin-cordova  : 1.6.2 
@ionic/cli-plugin-ionic-angular : 1.4.1 
@ionic/cli-utils    : 1.7.0 
ionic (Ionic CLI)    : 3.7.0 

グローバルパッケージ：

Cordova CLI : 7.0.1 

ローカルパッケージ：

@ionic/app-scripts : 1.3.7 
Cordova Platforms : android 6.2.3 ios 4.4.0 
Ionic Framework : ionic-angular 3.2.1 

システム：

Android SDK Tools : 26.0.2 
Node    : v7.10.0 
OS    : Linux 4.4 
npm    : 4.2.0 

から

：

"@types/leaflet": "^1.2.0", 
"@types/leaflet.awesome-markers": "^2.0.4", 
"leaflet": "^1.2.0", 
"leaflet.awesome-markers": "^2.0.4", 
"typescript": "2.3.4" 

関連するコード：

import * as L from "leaflet"; 
import "leaflet.awesome-markers"; 

private issueIcon: L.AwesomeMarkers.Icon; 

this.issueIcon = L.AwesomeMarkers.icon({ 
    icon: 'heart-broken', /* Heart with a crack */ 
    markerColor: 'red', 
    prefix: "fa" 
}); 

Iは、1）型定義に依存しているサードパーティモジュールの輸入をデバッグする）スクリプトと2を入力の両方に新たなんです。しかし、これは型の解決には問題がないようです - 私のIDEはleaflet.awesome-markersファイル内で定義された型を認識することができます。コンパイル/トランスイルエラー/警告もありません。

コンパイル時に問題がないので、これはそのモジュールの権限の問題を除外しているように見えますが、すべてのnode_moduleがプロジェクトのローカルにインストールされ、ディレクトリ全体で同じアクセス権を持っていることを確認しました。

これをデバッグする他の方法に興味があります。

Answer 1

npmまたは私のIDEがインポートを解決する方法を完全には理解していませんが、インポートを解決しようとする試みについてさらに詳細な説明が表示されています。

import "leaflet.awesome-markers"; 

：余分な詳細を取得するには、私は npm run buildコマンドが、それはこの行を解決するときに使用しようとしていたさまざまなパスや拡張子の詳細情報を提供

npm run build 

代わりの

ionic serve 

を使用しました

importステートメントを実際の.jsファイルの場所に変更すると、ビルドでこのファイルを解決できました。

import "leaflet.awesome-markers/dist/leaflet.awesome-markers";