URL значка маркера листовки скомпилирован неправильно при запуске ng build --prod

Question

По какой-то причине URL-адрес значка маркера Leaflet скомпилирован неправильно при запуске ng build --prod, а при запуске ng build URL-адрес значка маркера Leaflet в порядке.

Мое окружение:

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

Вы можете найти prod env под этим url

На снимке экрана показан пример неверного скомпилированного URL-адреса маркера значка.

Я думаю, это связано с этой проблемой на Leaflet, но я не мог понять, как решить эту проблему.

Answer 1

Leaflet переписывает теги src своих маркеров в DOM во время выполнения, и это ломается, когда вы используете Angular и AOT-компиляцию (которая включена в режиме prod).

Вы похожи, что могли быиспользовать ngx-листовку.Если это так, прочитайте этот раздел README для получения дополнительной информации о том, как заставить маркеры Leaflet работать в Angular.

TL; DR - это то, что вам нужно, чтобы ваши маркеры использовали пользовательские значки, которыеэталонные изображения, обрабатываемые конвейером сборки (например, Webpack или Angular CLI).

Сначала скажите Angular CLI скопировать значки Leaflet в каталог ./dist.В angular.json:

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

Затем, когда вы создаете маркеры, ссылайтесь на эти значки в вашем коде:

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

Это будет гарантировать, что Angular CLI скопирует все содержимое в node_modules/leaflet/dist/images каталог ./dist/assets, где вы можете ссылаться на них в маркерах своих клиентов.