找不到传单标记生产环境env angular 7

时间:2019-06-02 01:01:27

标签: angular leaflet

我在角度项目中使用传单地图。
使用传单显示带有标记的地图。
可以在ng服务器和ng build中正常工作。
但是在构建中使用--prod时不显示标记图标。
标记图像路径错误。

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

如何解决此问题?

1 个答案:

答案 0 :(得分:0)

您肯定会为生产构建使用不同的Angular配置,该配置会识别CSS中使用的资源。很有可能是默认的Angular配置。

在这种情况下,您遇到的是Leaflet与webpack的兼容性错误(这是Angular CLI的构建引擎),它会修改资源URL,如Leaflet issue #4698中所述。

您有2种简单的解决方案:

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';
  • 明确指定默认的图标图像资源,以便Leaflet不再需要URL猜测并且不再被webpack的URL重写弄乱:
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'),
});