传单标记图标 url 在运行 ng build --prod 时编译错误

Question

出于某种原因，Leaflet 标记图标 url 编译错误，而运行 ng build --prod 而不是运行 ng build Leaflet 标记图标 url 还好。

我的环境：

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

你可以在这个url

下找到prod env

截图显示了错误编译图标标记的示例url。

我猜这与Leaflet上的这个issue有关，但我不知道如何解决这个问题。

Answer 1

Leaflet 在运行时在 DOM 中重写其标记的 src 标签，当您使用 Angular 和 AOT 编译（在生产模式下打开）时会中断。

您看起来可能正在使用 ngx-leaflet。如果是这样，请阅读 this section of the README 以获取有关如何在 Angular 中使用 Leaflet 标记的一些信息。

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，您可以在客户标记中引用它们。

传单标记图标 url 在 运行 ng build --prod 时编译错误

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

angular

webpack

leaflet

ngx-leaflet

传单标记图标 url 在运行 ng build --prod 时编译错误