Question

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

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

如何解决此问题？

Answer 1

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

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

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

使用leaflet-defaulticon-compatibility plugin（我是作者）。只需在Leaflet插件之后导入插件CSS和JS。

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

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

1 个答案: