Leaflet marker icon url compiled wrong while running ng build --prod

Question

For some reason the Leaflet marker icon url compiled wrong while running ng build --prod instead when running ng build the Leaflet marker icon url is fine.

My environment:

Angular CLI: 7.0.5
Node: 11.2.0
OS: linux x64
Angular: 7.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.5
@angular-devkit/build-angular     0.10.5
@angular-devkit/build-optimizer   0.10.5
@angular-devkit/build-webpack     0.10.5
@angular-devkit/core              7.0.5
@angular-devkit/schematics        7.0.5
@angular/cli                      7.0.5
@ngtools/webpack                  7.0.5
@schematics/angular               7.0.5
@schematics/update                0.10.5
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

You can find prod env under this url

The screenshot shows an example of the wrong compiled icon marker url.

I guess it is related to this issue on Leaflet, but I could not figure it out how to solve this.

Answer 1

Leaflet rewrites the src tags of its markers in the DOM at runtime, and that breaks when you're using Angular and AOT compilation (which is turned on in prod mode).

You look like you might be using ngx-leaflet. If so, read this section of the README for some info on how to get Leaflet markers working in Angular.

The TL;DR is that you need to make your markers use custom icons that reference images being processed by the build pipeline (e.g., Webpack or Angular CLI).

First, tell Angular CLI to copy the Leaflet icons into the ./dist directory. In angular.json:

{
  ...
  "assets": [
    "assets",
    "favicon.ico",
    {
      "glob": "**/*",
      "input": "./node_modules/leaflet/dist/images",
      "output": "assets/"
    }
  ],
  ...
}

Then, reference those icons in your code when you create markers:

let layer = marker([ 46.879966, -121.726909 ], {
   icon: icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'assets/marker-icon.png',
      shadowUrl: 'assets/marker-shadow.png'
   })
});

That will ensure that Angular CLI will copy all the stuff in the node_modules/leaflet/dist/images directory into ./dist/assets, where you can reference them in your customer markers.