node.js - 运行时错误 : Cannot find module "leaflet.awesome-markers" Ionic 3

Question

我正在使用 Leaflet 将 Font Awesome 标记添加到 Ionic 3 应用程序，它可以成功显示 Leaflet 的内置标记，但是当我尝试导入 leaflet.awesome-markers 模块时，ionic serve报告一个运行时错误，说它找不到模块 leaflet.awesome-markers。

我遵循的一个建议是删除 node_modules 目录并让 npm 重新安装所有内容。这并没有改变结果。

ionic 信息的输出:

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 

来自package.json:

"@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"
});

我对 1) Type Script 和 2) 调试依赖于类型定义的第 3 方模块的导入都是新手。但是，这似乎不是解析类型的问题——我的 IDE 能够识别 leaflet.awesome-markers 文件中定义的类型。也没有编译/转译错误/警告。

因为没有编译时问题，这似乎排除了该模块的权限问题，但我检查过所有 node_modules 都安装在项目本地并且在整个目录中具有相同的权限。

对其他调试方法感兴趣。

Answer 1

我不完全理解 npm 或我的 IDE 如何解析导入，但我确实偶然发现了一个命令，该命令提供了有关尝试解析导入的更多详细信息。为了获得额外的细节，我使用了

npm run build

代替

ionic serve

npm run build 命令提供了它在解析此行时尝试使用的各种路径和扩展的详细信息:

import "leaflet.awesome-markers";

一旦我将 import 语句更改为实际 .js 文件的位置，我发现构建能够解析此文件:

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