Leaflet Marker not found production env angular 7

Question

I using leaflet map in angular project.
use of leaflet to show map with marker.
this work correctly in ng server and ng build.
but when use of --prod in build not show marker icon.
marker image path is wrong.

 http://127.0.0.1:8080/marker-icon.2273e3d8ad9264b7daa5.png%22)marker-icon-2x.png

how to resolve this problem ?

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'),
});