I'm adding Font Awesome markers to an Ionic 3 application using Leaflet that can successfully display Leaflet's built-in markers, but when I attempt to import the leaflet.awesome-markers module, ionic serve reports a runtime error saying it cannot find the module leaflet.awesome-markers.
One suggestion I've followed is to remove the node_modules directory and let npm re-install everything. This didn't change the results.
Output of 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
global packages:
Cordova CLI : 7.0.1
local packages:
@ionic/app-scripts : 1.3.7
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.2.1
System:
Android SDK Tools : 26.0.2
Node : v7.10.0
OS : Linux 4.4
npm : 4.2.0
From 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"
Relevant code:
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'm new to both 1) Type Script and 2) debugging imports of 3rd-party modules that rely on type definitions. However, this doesn't appear to be a problem with resolving types -- my IDE is able to recognize the types defined within the leaflet.awesome-markers file. No compile/transpile errors/warnings either.
Because there are no compile-time problems, this appears to rule out a permissions problem on that module, but I've checked that all node_modules are installed local to the project and have the same permissions throughout the directory.
Interested in other approaches to debugging this.
I don't fully understand how npm or my IDE is resolving imports, but I did stumble across a command that provided far more detail regarding the attempt to resolve the import. To get the extra detail, I used
npm run build
instead of
ionic serve
The npm run build command provided details of the various paths and extensions it was trying to use when resolving this line:
import "leaflet.awesome-markers";
I found the build was able to resolve this file once I changed the import statement to the location of the actual .js file:
import "leaflet.awesome-markers/dist/leaflet.awesome-markers";
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments