Leaflet Marker not found production env angular 7 [closed]

Answer 1

You surely have a different Angular configuration for production build, which fingerprints resources used in CSS. High chance that is the default Angular configuration.

In that case, you are hitting the compatibility bug of Leaflet with webpack (which is the build engine under the hood of Angular CLI) that modifies resources URL, as described in Leaflet issue #4698.

You have 2 easy solutions for your case:

• use leaflet-defaulticon-compatibility plugin (I am the author). Simply import the plugin CSS and JS after Leaflet ones.

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
import * as L from 'leaflet';
import 'leaflet-defaulticon-compatibility';

• explicitly specify the default icon images resource, so that Leaflet no longer needs URL guessing and is no longer messed up by webpack's URL rewriting:

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});