运行ng build --prod时传单标记图标的URL编译错误 [英] Leaflet marker icon url compiled wrong while running ng build --prod

问题描述

由于某种原因，在运行 ng build --prod 时，Leaflet标记图标url编译错误，而在运行 ng build 时，Leaflet标记图标url很好.

我的环境:

  Angular CLI:7.0.5节点:11.2.0作业系统:Linux x64角度:7.0.3...动画，通用，编译器，compiler-cli，核心，形式... http，语言服务，平台浏览器...平台浏览器动态路由器套餐版本-----------------------------------------------------------@ angular-devkit/architect 0.10.5@ angular-devkit/build-angular 0.10.5@ angular-devkit/构建优化器0.10.5@ angular-devkit/build-webpack 0.10.5@ angular-devkit/核心7.0.5@ angular-devkit/schematics 7.0.5@角度/cli 7.0.5@ ngtools/webpack 7.0.5@ schematics/角度7.0.5@ schematics/更新0.10.5rxjs 6.3.3打字稿3.1.6webpack 4.19.1 

您可以在以下

时编译错误

我想这与Leaflet上的 issue 有关，但我无法弄清楚如何解决这个问题.

解决方案

Leaflet在运行时在DOM中重写其标记的src标记，并且当您使用Angular和AOT编译时会中断(在prod中打开)模式).

您看起来好像正在使用ngx-leaflet.如果是这样，请阅读自述文件的本部分，以获取有关以下内容的一些信息:如何使小叶标记在Angular中工作.

TL; DR是您需要使标记使用自定义图标，这些图标引用构建管道(例如Webpack或Angular CLI)正在处理的图像.

首先，告诉Angular CLI将Leaflet图标复制到 ./dist 目录中.在angular.json中:

  {...资产":[资产"，"favicon.ico"，{"glob":"**/*"，"input":"./node_modules/leaflet/dist/images"，输出":资产/"}]，...} 

然后，在创建标记时在代码中引用这些图标:

  let layer = marker([46.879966，-121.726909]，{图标: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 中，您可以在其中引用它们在您的客户标记中.

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.

解决方案

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.

这篇关于运行ng build --prod时传单标记图标的URL编译错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！